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