MUI上傳圖片之選擇相冊和相機上傳

1.因為項目中有三處地方需要上傳，所以html中存在三處地方。身份證正反面為上傳一張，發票限制上傳9張。

<div class="action1">
     <!--展示圖片頁面-->
     <button id="InputFile" class="InputFile image-item cardpica"></button>                                                                                          
 </div>

<div class="action2">
    <!--展示圖片頁面-->
     <button id="InputFile2" class="InputFile2 image-item cardpicb"></button>        
 </div>


<div class="action3">
     <!--展示圖片頁面-->
       <div class="cropped cropped3">
       </div>
                                                        
       <button id="InputFile3" class="InputFile3 image-item cardpic"></button>        
                                                
  </div>

2.js部分，推薦一個網址，文檔有的比官方詳細：http://www.dybc.com.cn/doc/mui_h5plus

//上傳圖片
            var btn=document.getElementById('InputFile');
            var btn1=document.getElementById('InputFile2');
            var btn2=document.getElementById('InputFile3');
            var type;//此處定義type是為了區分是從第幾個區域上傳的

            btn.addEventListener('tap',function() {
                type=0;
                var btnArray = [{title: "照相機"}, {title: "相冊"}]; //選擇按鈕  1 2 3
                plus.nativeUI.actionSheet({
                        title: "請選擇",
                        cancel: "取消", // 0
                        buttons: btnArray
                    },
                    function(e) {
                        var index = e.index; 
                        /*alert(index);*/
                        switch(index) {
                            case 1:
                                //寫自己的邏輯
                                camera();
                                break;
                            case 2:
                               album();
                                break;
                        }
                    });

           })
                
            btn1.addEventListener('tap',function() {
                type=1;
                var btnArray = [{title: "照相機"}, {title: "相冊"}]; //選擇按鈕  1 2 3
                plus.nativeUI.actionSheet({
                        title: "請選擇",
                        cancel: "取消", // 0
                        buttons: btnArray
                    },
                    function(e) {
                        var index = e.index; 
                        /*alert(index);*/
                        switch(index) {
                            case 1:
                                //寫自己的邏輯
                                camera();
                                break;
                            case 2:
                               album();
                                break;
                        }
                    });

           })
        
            btn2.addEventListener('tap',function() {
                type=2;
                var btnArray = [{title: "照相機"}, {title: "相冊"}]; //選擇按鈕  1 2 3
                plus.nativeUI.actionSheet({
                        title: "請選擇",
                        cancel: "取消", // 0
                        buttons: btnArray
                    },
                    function(e) {
                        var index = e.index; 
                        /*alert(index);*/
                        switch(index) {
                            case 1:
                                //寫自己的邏輯
                                camera();
                                break;
                            case 2:
                               album();
                                break;
                        }
                    });

           })
        
    function camera(){
            var cmr = plus.camera.getCamera();
            cmr.captureImage( function ( p ) {
                    //成功
                    plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
                
                        var img_name = entry.name;//獲得圖片名稱
                        var path = entry.toLocalURL();//獲得圖片路徑
                        
                         upload_img(path);
                    
                    }, function ( e ) {
                        console.log( "讀取拍照文件錯誤："+e.message );
                    } );
                    
                }, function ( e ) {
                    console.log( "失敗："+e.message );
            }, {filename:'_doc/camera/',index:1} ); //  “_doc/camera/“  為保存文件名
        
        }
        
    function album(){
            plus.gallery.pick( function(path){
            
          /*  img.src = path;*///獲得圖片路徑
            upload_img(path);
            
        }, function ( e ) {
            console.log( "取消選擇圖片" );
        }, {filter:"image"} );
    
        }
        
        
         //初始上傳地址  
      var server=config.api + '/public/common/upload'; 
      var files=[]; //圖片存放的數組 可以上傳一個，或者多個圖片 
        
        //上傳圖片
    function upload_img(p){
        //又初始化了一下文件數組 為了支持我的單個上傳,如果你要一次上傳多個，就不要在寫這一行了
        //注意 
        files=[];
        var n=p.substr(p.lastIndexOf('/')+1);
        files.push({name:"file",path:p});
        
        //開始上傳
        start_upload();
            
    }
        
       //開始上傳
    function start_upload(){
            if(files.length<=0){
                plus.nativeUI.alert("沒有添加上傳文件！");
                return;
            }
            //原生的轉圈等待框
            var wt=plus.nativeUI.showWaiting();                    
            var task=plus.uploader.createUpload(server,
                {method:"POST"},
                function(t,status){ //上傳完成
                    wt.close();
                /*    alert(status);*/
                    if(status==200){
                        //關閉轉圈等待框                        
                        //資源
                        var responseText = t.responseText;                                
                        //轉換成json
                        var json = eval('(' + responseText + ')');                            
                        //上傳文件的信息
                        var files = json.data;                        
                        //上傳成功以后的保存路徑                
                        /*    alert(type);*/
                        if(type==0){
                            if($('.img1').attr('src') == "") {
                                
                            } else {
                                $('.action1').append('<div class="cropped1">' +
                                    '<div class="image1 ">' +
                                    '<img src="' + files + '" class="img1 image-item cardpica" id="show"/>' +
                                    '<div class="delete1">' + "X" + '</div>' +
                                    '</div>' +
                                    '</div>');
                                $('#InputFile').hide();
                            }
                            /*圖片刪除*/
                            $('.delete1').click(function() {                                
                                $(this).parent().remove();
                                $(this).parent().parent().remove();
                                $(this).siblings().find('.delete1').remove();
                                $(this).remove();
                                $('#InputFile').show();
                            });                                
                                
                            }else if(type==1){
                            if($('.img2').attr('src') == "") {} else {
                                $('.action2').append('<div class="cropped2">' +
                                    '<div class="image2 ">' +
                                    '<img src="' + files + '" class="img2 image-item cardpicb" id="show"/>' +
                                    '<div class="delete2">' + "X" + '</div>' +
                                    '</div>' +
                                    '</div>');
                                $('#InputFile2').hide();
                            }
                            /*圖片刪除*/
                            $('.delete2').click(function() {                                
                                $(this).parent().remove();
                                $(this).parent().parent().remove();
                                $(this).siblings().find('.delete1').remove();
                                $(this).remove();
                                $('#InputFile2').show();
                            });

                                
                            }else if(type==2){
                                var num = $(".img3").length + 1;
                                if(num >9) {
                                    mui.toast('最多上傳9張發票圖片哦~');            
                                } else {
                                    
                                    $('.cropped3').append('<div class="image2 mui-col-xs-6">' + '<img src="' + files + '" class="img3 image-item ">' +
                                    '<div class="delete3">' + "X" + '</div>' +
                                    '</div>');
                                $('.btn-default').hide();
                                $('.delete3').click(function() {
                                    $(this).parent().remove();
                                    $(this).parent().find('img').removeAttr("src");
                                })
                                }
                            }
                                                    
                        console.log(JSON.stringify(files));    
                                
                        //ajax 寫入數據庫                                                                                                
                        
                    }else{
                        console.log("上傳失敗："+status);
                        //關閉原生的轉圈等待框
                        wt.close();
                    }
                });
            
            //上傳需要傳輸到接口的數據
            task.addData("data",files);
            task.addData("uid",getUid());
            for(var i=0;i<files.length;i++){
                var f=files[i];
                task.addFile(f.path,{key:f.name});
            }
            task.start();
                
        }
        
// 產生一個隨機數
function getUid(){
    return Math.floor(Math.random()*100000000+10000000).toString();
}    

3.發票傳給后台需要自己存放到數組，因為頁面的有兩個按鍵。保存和提交審核，為了防止沖突，可以全部定義變量，然后每次進入按鍵時間初始化，把原來存放的值清空。

    var is_submit = "";
            var param = {};
            var images;
            var imagesPic = {};
            var cardPic = {};
            var carda;
            var cardb;
            //數據
            function applydata() {
                images = [];
                var name = $('.name').val();
                var mobile = $('.mobile').val();
                var mobile_backup = $('.mobile_backup').val();
                var sex = $('#sex').find("option:selected").attr('class');
                var card_type = $('#card_type').find("option:selected").attr('class');
                var card_number = $('.card_number').val();
                    carda = $('.img1').attr("src");
                    cardb = $('.img2').attr("src");
                var province = $("#pro").find("option:selected").attr('class');
                var city = $('#city').find("option:selected").attr('class');
                var hospital_id = $('#hospital_id').find("option:selected").attr('class');
                var department_id = $('#department_id').find("option:selected").text();
                var doctor = $('.doctor').val();
                var store_province = $('#store_province').find("option:selected").attr('class');
                var store_city = $('#store_city').find("option:selected").attr('class');
                var store_id = $('#store_id').find("option:selected").attr('class');

                //發票                
                $('.cropped img').each(function() {
                    var imageUrl = {};
                    imageUrl.url = $(this).attr("src");
                    images.push(imageUrl);
                });
                /*imagesPic.images = images;*/
                /*imagesPic = JSON.stringify(images);*/
                
                cardPic.card_front_imgurl = carda;
                cardPic.card_back_imgurl = cardb;
                /*cardPic = JSON.stringify(cardPic)*/

                param = {
                    "name": name,
                    "sex": sex,
                    "mobile": mobile,
                    "mobile_backup": mobile_backup,

                    "card_type": card_type,
                    "card_number": card_number,
                    "card_pic":JSON.stringify(cardPic),

                    "province": province,
                    "city": city,
                    "hospital_id": hospital_id,
                    "department_id": department_id,
                    "doctor": doctor,

                    "store_province": store_province,
                    "store_city": store_city,
                    "store_id": store_id,

                    "invoice": JSON.stringify(images),
                    "is_submit": is_submit,
                    "page": 0,
                    "user_id": user_id,
                    "process_id": "89903124080230400"
                }
            }