系列教程之mui手机上传照片拍照上传及调用相册

<header class="mui-bar mui-bar-nav">
 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
 <h1 class="mui-title">拍照 </h1>
 <a class="mui-icon-right-nav mui-pull-right">
 <span id="headImage" class="mui-icon mui-icon-camera"></span>
 </a>
 <a class="mui-icon-right-nav mui-pull-right">
 <span id="uploadImage" class="mui-icon mui-icon-upload"></span>
 </a>
 </header>
 <div class="mui-content" style="background-color:#fff">
 <ul id="imgs" class="mui-table-view mui-grid-view">
 <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
 <a href="#">
 <img class="mui-media-object" src="images/shuijiao.jpg">
 <span class="mui-icon mui-icon-trash deleteBtn"></span>
 <div class="mui-media-body">
 <input type="text" class="remark" placeholder="备注">
 </div>
 </a>
 </li>-->
 </ul>
 </div>

	var fileArr = [];
	 mui.init({
		swipeBack: true //启用右滑关闭功能
	 });
	 document.getElementById('headImage').addEventListener('tap', function() {
		 if(mui.os.plus) {
		 var buttonTit = [{
			 title: "拍照"
			 }, {
			 title: "从手机相册选择"
		 }];

		 plus.nativeUI.actionSheet({
			 title: "上传图片",
			 cancel: "取消",
			 buttons: buttonTit
		 }, function(b) { /*actionSheet 按钮点击事件*/
		 switch(b.index) {
			 case 0:
				break;
			 case 1:
				getImage(); /*拍照*/
				break;
			 case 2:
				galleryImg(); /*打开相册*/
				break;
			 default:
				break;
			 }
		 })
		 }
		 }, false);


	 // 拍照获取图片  
	 function getImage() {
		 var c = plus.camera.getCamera();
		 c.captureImage(function(e) {
			plus.io.resolveLocalFileSystemURL(e, function(entry) {
			var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径  
			setFile(imgSrc);
			setHtml(imgSrc);
		 }, function(e) {
			console.log("读取拍照文件错误：" + e.message);
		 });
		 }, function(s) {
			console.log("error" + s.message);
		 }, {
			filename: "_doc/camera/"
		 })
	 }
	 // 从相册中选择图片   
	 function galleryImg() {
		 // 从相册中选择图片  
		 plus.gallery.pick(function(e) {
		 for(var i in e.files) {
			 var fileSrc = e.files[i];
			 setFile(fileSrc);
			 setHtml(fileSrc);
		}
		 }, function(e) {
			console.log("取消选择图片");
		 }, {
			 filter: "image",
			 multiple: true,
			 //maximum: 5,
			 system: false,
			 onmaxed: function() {
			 plus.nativeUI.alert('最多只能选择5张图片');
		 }
	 });
	 }


	 function setHtml(path) {
		 var str = '';
		 str = '<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
		 '<img class="mui-media-object" src="'+path+'">'+
		 '<span class="mui-icon mui-icon-trash deleteBtn"></span>'+
		// '<div class="mui-media-body">'+
		// '<input type="text" class="remark" placeholder="备注">'+
		// '</div>'+
		// '<img class="mui-icon deleteBtn" src="images/delete.png" >'+
		 '</li>';
		jQuery("#imgs").append(str);
	 }
	 
	 function setFile(fileSrc){
		 var image = new Image();  
		 image.src = fileSrc;
		 fileArr.push(image);
	 }
	 
 	<!-- 图片的删除 -->
 <!-- $(function() {
 	$(document).on("click", ".deleteBtn", function(){
 		 $(this).parent('li').remove(); //删除父元素
 	})
 }); -->
 
 
 document.getElementById('uploadImage').addEventListener('tap',function(){
 var files = fileArr;
   var wt=plus.nativeUI.showWaiting();
            var task=plus.uploader.createUpload('http://192.168.1.111:8181/sys-privilege/Upload',  //测试时候不要用localhost
                {method:"POST"},
                function(t,status){ //上传完成
                    if(status==200){
                        alert("上传成功："+t.responseText);
                        wt.close(); //关闭等待提示按钮
                    }else{
                        alert("上传失败："+status);
                        wt.close();//关闭等待提示按钮
                    }
                }
            );  
         //将文件集合添加到上传队列中
		 for(var i=0;i<files.length;i++){
			 var f=files[i];
			 task.addFile(f.src,{key:i});
		 }
		 //传其他的参数 如备注
		 //添加其他参数
		 //遍历5个input框
		 
		task.addData("comment","test");
		task.start();
 }); 

后台代码参考：

    @CrossOrigin
    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult uploadBreakPhoto(MultipartHttpServletRequest multipartRequest, @RequestParam("comment") String comment)
    {
        ......

        return ajax;
    }

参考：

https://blog.csdn.net/qq_29407683/article/details/80007643

https://blog.csdn.net/qq_35525955/article/details/80904844