html5中上传图片

从相册中选择图片上传

function uploadFromAlbum(type) {
    var dirtype = "";
    if ("pick_store_license" == type || "pick_id_pic" == type) {
        dirtype = "auth";
    }
    if ("pick_store_pic" == type) {
        dirtype = "store";
    }
    plus.gallery.pick(
        function (path) {
            //选择成功
            $("#heisebg").removeClass("heisebg").addClass("heisebghid");
            $("#waitingupload").removeClass("heisebghid").addClass("heisebg");
            var task = plus.uploader.createUpload(configManager.RequstUrl + "api/common/upload",
                { method: "POST", blocksize: 102400, priority: 100 },
                function (upload, status) {
                    // 上传完成
                    if (status == 200) {
                        var data = JSON.parse(upload.responseText);
              //显示图片              ... ...
                        $("#waitingupload").removeClass("heisebg").addClass("heisebghid");
                    } else {
                        console.log("Upload failed: " + status);
                    }

                }
            );
            task.addFile( path, { key: "file" });
            task.addData("dir", dirtype);
            task.start();
        },
        function (e) {
            console.log(e);
        },
        { filter: "image" }
    );
}

函数套函数,要分清楚当前这个函数到底有那些参数。拍照上传的方法如下:

//从摄像头中拍照
function uploadFromCamera(type) {
    var dirtype = "";
    if ("pick_store_license" == type || "pick_id_pic" == type) {
        dirtype = "auth";
    }
    if ("pick_store_pic" == type) {
        dirtype = "store";
    }

    var cmr = plus.camera.getCamera(1);
    if (null != cmr) {
        //拍照
        cmr.captureImage(function (p) {
            plus.io.resolveLocalFileSystemURL(
            p,
            function (entry) {
                //拍照成功
                $("#heisebg").removeClass("heisebg").addClass("heisebghid");
                $("#waitingupload").removeClass("heisebghid").addClass("heisebg");
                //上传图片
                var task = plus.uploader.createUpload(configManager.RequstUrl + "/api/common/upload",
                    { method: "POST", blocksize: 102400, priority: 100 },
                    function (upload, status) {
                        // 上传完成
                        if (status == 200) {
                            var data = JSON.parse(upload.responseText);
                //显示图片                ... ...
                            console.log(upload.responseText);
                        } else {
                            console.log("Upload failed: " + status);
                        }
                    }
                );
                task.addFile("file://" +  entry.fullPath, { key: "file" });
                task.addData("dir", dirtype);
                task.start();

            },
            function (e) {
                plus.ui.alert(e.message, function () { }, configManager.alerttip, configManager.alertCtip);
            }
            );
        },
        function (e) { },

        { filename: "_doc/camera/" });

    }
    else {
        plus.ui.alert("没有找到摄像头", function () { }, configManager.alerttip, configManager.alertCtip);
    }

}

注意这一句task.addFile("file://" + entry.fullPath, { key: "file" }); 前面要加上file://防止在ios下找不到图片路径。

时间: 2024-10-10 15:22:15

html5中上传图片的相关文章

HTML5中的Range对象的研究

一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象: var  selection =

利用html5实现上传图片预览

在HTML5中,通过FileReader可以轻松的实现这个功能. 只要在<input type="file" />文件表单元素中监听 onchange 事件,然后通过FileReader读取图片文件,然后将读取的内容在<img>中显示即可. 实现代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /

4.html5中超链接和路径

html中超链接都是通过<a>标签实现的,html5也不例外,这里就来探讨一下<a>标签. <a>元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有通用属性或叫做全局属性,全局属性是的问题我们以后再来探讨. 对于其私有属性有哪些,下面用一个表格进行了整理: 属性名称 说明 href 指定<a>元素所指资源的 URL hreflang 指向的链接资源所使用的语言 media 说明所链接资源用于哪种设备 rel 说明文档与所链接资源的关系类型 t

HTML5中引入的关键特性

新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextmenu 定义menu元素的DOM id作为定义钙元素特性的上下文菜单 data-X 制定可以包含在标签中的用户定义的元数据,而不必担心这些元数据与当前的特性或者未来的特性冲突.使用这种类型的特性可以避免创建自定义特性或者过载class特性的常见方法 draggable 定义特性时,允许元素与其内容可以

HTML5中判断横屏竖屏

HTML5中判断横屏竖屏 在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media screen and (orientation: portrait) {   /*竖屏 css*/ } @media screen and (orientation: landscape) {   /*横屏 css*/ } 分开写在2个CSS中 竖屏 1 <link rel=

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图.饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas * 如何使用Canvas * 在

HTML5中的SVG

* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名为".svg" * SVG使用的是XML语法 * 概念 * SVG是一种使用XML技术描述二维图形的语言 * SVG的特点 * SVG绘制图形可以被搜索引擎抓取 * SVG在图片质量不下降的情况下,被放大 * SVG与Canvas的区别 * SVG * 不依赖分辨率 * 支持事件绑定 *

html5 中的 css样式单 的 两种调用方式的区别

在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有的样式单,推荐使用这种方式. 2.导入外部样式文件:此方式与第一种方式类似,但是需要用@import来引入外部样式单.由于某些浏览器(如 internet explorer)会在导入外部样式单时导致闪屏,所以不推荐用这种方式,而是尽量考虑使用第一种方式. 3.使用内部样式定义:这种方式是通过在htm

用html5中的canvas写的时钟

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&