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，因此如果服務器需要保存圖片 需要解碼。