1. 程式人生 > >HTML5+ 拍照上傳 和選擇檔案上傳

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
    };
})();