MUI+HTML5+Plus 拍照或者相册选择图片并上传服务器

引入文件

css:mui.min.css、app.css、iconfont.css、feedback-page.css、font-awesome.min.css

js:jquery.js、common.js、utitls.js

相关文件见：https://pan.baidu.com/s/1ITkQuUzXn05DeDuV1cLB9w 密码：l1fx

css:

<style>  
            .table-view {  
                position: relative;  
                margin-top: 0;  
                margin-bottom: 0;  
                padding-left: 0;  
                list-style: none;  
                background-color: #f5f5f5;  
            }  
              
            .table-view-cell {  
                position: relative;  
                overflow: hidden;  
                padding: 0px 15px;  
                -webkit-touch-callout: none;  
                margin-bottom: 1px;  
            }  
              
            .table-view-cell:after {  
                position: absolute;  
                right: 0;  
                bottom: 0;  
                left: 0px;  
                height: 1px;  
                content: '';  
                -webkit-transform: scaleY(.5);  
                transform: scaleY(.5);  
                background-color: #c8c7cc;  
            }  
              
            .table-view-cell>a:not(.btn) {  
                position: relative;  
                display: block;  
                overflow: hidden;  
                margin: -0px -15px;  
                padding: inherit;  
                white-space: nowrap;  
                text-overflow: ellipsis;  
                color: inherit;  
                background-color: #75b9f4;  
                height: 40px;  
                line-height: 40px;  
            }  
              
            .navigate-right:after  
            {  
                font-family: Muiicons;  
                font-size: inherit;  
                line-height: 1;  
                position: absolute;  
                top: 50%;  
                display: inline-block;  
                -webkit-transform: translateY(-50%);  
                transform: translateY(-50%);  
                text-decoration: none;  
                color: #666;  
                -webkit-font-smoothing: antialiased;  
            }  
              
            .table-view-cell.collapse .collapse-content {  
                position: relative;  
                display: none;  
                overflow: hidden;  
                margin: 0px -15px 0px;  
                padding: 0px 0px !important;  
                -webkit-transition: height .35s ease;  
                -o-transition: height .35s ease;  
                transition: height .35s ease;  
                background-color: transparent;  
            }  
            .image-item{  
                position: relative;  
            }  
            .image-item .info{  
                position: absolute;  
                top:0px;  
                left:4px;  
                color: #ff9900;  
                font-size: 12px;                          
                  
            }  
        </style>  

HTML:

<div class="panel feedback">
						<div class="content">
							<input type="hidden" id="ckjl.id" name="ckjl.id" value="429">  
							<div class="collapse-content" >  
								<form>  
									<label class="row-label"></label>  
									<div id='F_CKJLBS' class="row image-list">  
										<div class="image-item" id="F_CKJLB" onclick="showActionSheet(this);">
										</div>  
									</div>  
								</form>  
							</div>
						</div>
					</div>

JS:

//选取图片的来源，拍照和相册 
function showActionSheet(conf){
	  var divid = conf.id;  
	  var actionbuttons=[{title:"拍照"},{title:"相册选取"}];  
	  var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};  
	  plus.nativeUI.actionSheet(actionstyle, function(e){  
			if(e.index==1){  
				getImage(divid);  
			}else if(e.index==2){  
				galleryImg(divid);  
			}  
	  } );  
} 

//相册选取图片  
function galleryImg(divid) {  
	plus.gallery.pick( function(p){  
		//alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg  
		plus.io.resolveLocalFileSystemURL(p, function(entry) {  
			//alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg  
			//alert(entry.name);//IMG_20160704_112620.jpg  
			compressImage(entry.toLocalURL(),entry.name,divid); //压缩图片 
		}, function(e) {  
			plus.nativeUI.toast("读取拍照文件错误：" + e.message);  
		});  
	}, function ( e ) {  
	}, {  
		filename: "_doc/camera/",  
		filter:"image"  
	} );  
}
// 拍照  
function getImage(divid) {  
	var cmr = plus.camera.getCamera();  
	cmr.captureImage(function(p) {  
		//alert(p);//_doc/camera/1467602809090.jpg  
		plus.io.resolveLocalFileSystemURL(p, function(entry) {  
			//alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg  
			//alert(entry.name);//1467602809090.jpg  
			
			compressImage(entry.toLocalURL(),entry.name,divid);  
		}, function(e) {  
			plus.nativeUI.toast("读取拍照文件错误：" + e.message);  
		});  
	}, function(e) {  
	}, {  
		filename: "_doc/camera/",  
		index: 1  
	});  
}
//压缩图片  
function compressImage(url,filename,divid){  
	var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg  
	plus.zip.compressImage({  
			src:url,//src: (String 类型 )压缩转换原始图片的路径  
			dst:name,//压缩转换目标图片的路径  
			quality:20,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100  
			overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件  
		},  
		function(event) {
			
			plus.io.resolveLocalFileSystemURL(event.target,function(entry){
			     entry.file( function(file){  
			         var fileReader = new plus.io.FileReader();  
			         fileReader.readAsDataURL(file);  
			         fileReader.onloadend = function(e) {
						var picUrl = e.target.result.toString();
						// $("#img").attr("src",picUrl)
						var arr = picUrl.split(',');
						var type = arr[0].match(/:(.*?);/)[1];//获得图片的类型
						//---把base64转化为二进制----
						var text = window.atob(picUrl.split(",")[1]);
						var buffer = new Uint8Array(text.length);
					   
						var pecent = 0, loop = null;
						for (var i = 0; i < text.length; i++) {
						  buffer[i] = text.charCodeAt(i);
						}
						var blob = getBlob([buffer], type);
						uploadImg(blob);
						
						// console.log(blob.size/1024+"kb");
						// fd = new FormData();//上边是FormData的介绍
						// 	fd.append('photoupload',blob);
						// 	console.log(fd)
						//fd里存有图片的二进制
					  }  
			     });  
			});
			
			
			return;
			
			//uploadf(event.target,divid);  
			var path = name;//压缩转换目标图片的路径  
			//event.target获取压缩转换后的图片url路  
			//filename图片名称  
			saveimage(event.target,divid,filename,path);  
			console.log(event.target)
			console.log(divid)
			console.log(filename)
			console.log(path)
		},function(error) {  
			plus.nativeUI.toast("压缩图片失败，请稍候再试");  
	});  
}

function uploadImg(blob){
	
	var Bh = $("#bianhao").val();
	if(!Bh){
		alert("编号不能为空！")
		return;
	}
	// alert(Bh)
	// return;
	var formdata = new FormData();
	formdata.delete("Bh");
	formdata.append("Bh", Bh);
	
	formdata.append("file", blob, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
	formdata.delete("fileSize");
	formdata.append("fileSize", blob.size);
	plus.nativeUI.showWaiting("正在上传照片..");
	$.ajax({
		url: upLoadImgUrl,
		type: 'POST',
		data: formdata,
		async: true,
		cache: false,
		contentType: false,
		processData: false,
		datatype: "jsonp",
		success: function (result) {
			plus.nativeUI.closeWaiting(); 
			// alert(result.fileName)
			alert('图片上传成功');
			showPicture(result,Bh);
			
		},
		error: function (result, status) {
			plus.nativeUI.closeWaiting(); 
			alert('图片上传失败');
			return;
		}
	});
}

function showPicture(result,Bh){
	var src = imgPath + "/UploadFile/Attachment/" + Bh + "/" + result.fileName
	var html = "";
	html +='<div  class="image-item ">';   
	html +='    <img data-preview-src="" id="picBig" src="'+src+'"/>';
	html +='    <div style="width:100%;position:absolute;bottom:0px;background:#eeeeee;text-align:center"><span style="color:red;font-size:12px">上传成功</span></div>';
	html +='</div>';  
	$("#F_CKJLBS").append(html);
}

转自：https://blog.csdn.net/qq_27626333/article/details/51896616