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"
                }
            }