HTML5+ 拍照上传 和选择文件上传
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 }; })();
以上两个部分 用到了 dcloud html+中的 相机相关事件和方法,以及IO 根据地址 获取文件流的方法,上传到服务器的图片为base64,因此如果服务器需要保存图片 需要解码。