码迷,mamicode.com
首页 > Web开发 > 详细

HTML5+ 拍照上传 和选择文件上传

时间:2016-08-23 20:22:29      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:

HTML 页面内容包含以下标签即可:

    

                   <input id="btn_select" type="button"  value="从相册选择" />
                   <input id="btn_takephoto" type="button"  value="拍照" />
                   <img id="imgViewer" src="" alt="暂无图片" width="100" height="100"/>
                   <input id="btn_save" type="button" value="确认上传" />

 

JS实现部分:

技术分享
(function() {
    var url = "XXXXXXXXXX上传的文件地址";
    
    var file;
    var w = null;
    // H5 plus事件处理
    function plusReady() {

        //w=plus.nativeUI.showWaiting();
        //H5 准备好的时候 绑定拍照事件
        
        //拍照单机事件
        $("#btn_takephoto").bind("click", function() {
            //拍照
            plus.camera.getCamera().captureImage(function(p) {
                plus.io.resolveLocalFileSystemURL(p, function(entry) {
                    console.log(entry.toLocalURL());
                    $("#imgViewer").attr("src", entry.toLocalURL());
                }, function(e) {
                    outLine("读取拍照文件错误:" + e.message);
                });

            });
        });
         
         //从相册选择
        $("#btn_select").bind("click", function() {
            plus.gallery.pick(function(p) {
                console.log(p);
                $("#imgViewer").attr("src", p);
            });
        });
        
        //上传文件
        $("#btn_save").bind("click", function() {
            var wt = plus.nativeUI.showWaiting();
          //根据路径读取到文件
          plus.io.resolveLocalFileSystemURL($("#imgViewer").attr("src"),function(entry){
              entry.file( function(file){
            var fileReader = new plus.io.FileReader();
            fileReader.readAsDataURL(file);
            
            fileReader.onloadend = function(e) {
                var f = $("#imgViewer").attr("src");
                var filename = f.replace(f.substring(0, f.lastIndexOf(‘/‘) + 1), ‘‘);
                var param = {
                    fileName: filename
                    dataInput: e.target.result.toString()
                };
                //自定义的ajax方法 
                ToolHelper.AsyncAjax(url, param, function(data, para) {
                    wt.close();
                    if (data[0].responseCode != undefined && data[0].responseCode != "") {
                        $.dialog.alert(data[0].responseMessage);
                    } else {
                        $.dialog.alert("上传成功");
                    }
                });
            }
    
         });
          });
            
            

            
        });
    }
    if (window.plus) {
        plusReady();
    } else {
        document.addEventListener("plusready", plusReady, false);
    }

    return BaseObj = {
        save: saveEdit
    };
})();
JavaScript

 

以上两个部分 用到了 dcloud html+中的  相机相关事件和方法,以及IO 根据地址 获取文件流的方法,上传到服务器的图片为base64,因此如果服务器需要保存图片 需要解码。

HTML5+ 拍照上传 和选择文件上传

标签:

原文地址:http://www.cnblogs.com/zhiyin/p/5800579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!