HTML5+ 拍照上傳 和選擇檔案上傳
阿新 • • 發佈:2018-11-09
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 }; })();