MUI 上传图片案例

HTML代码

				<div id="credential-photo" class="mui-input-row" style="height: 60px;padding-top: 8px; display: none;">
					<label><i>* </i>证书照片</label>
					<div>
						<div id="userfile" style="display: inline-block;">
								
						</div>
						<a id="addfile" href="#picture"><img src="img/toggle-expand.png"/></a>
					</div>
				</div>


			<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a id="getImage" href="#">拍照</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="getAlbum" href="#">相册</a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#picture"><b>取消</b></a>
					</li>
				</ul>
			</div>

然后是简单的CSS

			#userfile>.img-item{
				position: relative;
				margin: 0;
				padding: 0;
				display: inline-block;
			}
			#userfile>.img-item>.img-close{
				position: absolute;
				right: 0px;
				background-color: red;
				display: inline-block;
				 14px;
				height: 14px;
				border-radius: 7px;
				color: #FFFFFF;
				text-align: center;
				font-size: 14px;
				font-weight: bold;
				cursor: pointer;
			}

　js代码

//------------------------------- 拍照  ----------------------------------------------
			document.getElementById('getImage').addEventListener('tap',getImage);
			document.getElementById('getAlbum').addEventListener('tap',getAlbum);	
				function getAlbum(){  
					    plus.gallery.pick(function(path){
					    	console.log(path)
					    	compress(path);
					    }, function(e){
					    	outSet('取消选择图片');
					    }, {filter:'image'});
				}
			function getImage(){
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p){
					//console.log('成功：'+p);
					plus.io.resolveLocalFileSystemURL(p, function(entry){
//							createItem(entry);
						var path = entry.toLocalURL(); 
						compress(path);
					}, function(e){
						//alert('读取拍照文件错误：'+e.message);
                        mui.toast('读取拍照文件错误：'+e.message,{ duration:'long', type:'div' });
					});
				}, function(e){
//						alert('失败：'+e.message);
				}, {filename:'_doc/camera/',index:1});
			}
			var size = null;
			var index=1;
			function compress(path){
				var name = path.substr(path.lastIndexOf('/') + 1);
				plus.zip.compressImage({
					src: path,
					dst: '_doc/' + name,
					overwrite: true,
					quality: 50
				}, function(zip) {
					size += zip.size  
					//console.log("filesize:"+zip.size+",totalsize:"+size);
					if (size > (10*1024*1024)) {
						return mui.toast('文件超大');
					}
					//console.log(JSON.stringify(zip));
					var imgparent = document.createElement('div');
					var closeimg = document.createElement('div');
					closeimg.setAttribute('class','img-close mui-icon mui-icon-closeempty');
					var id = 'credentialimg-'+index;
					closeimg.id=id;
					imgparent.setAttribute('class','img-item');
					var img = document.createElement('img');
					img.src= zip.target;
					img.width = 40;
					img.height = 40;
					img.style.margin = '5px';
					img.style.marginBottom = '0';
// 							img.setAttribute('onclick', 'displayFile(this.src)');
					var div = document.getElementById('userfile');
					imgparent.appendChild(img);
					imgparent.appendChild(closeimg);
					div.appendChild(imgparent);
					upload(zip.target,id);
					index++;
				}, function(zipe) {
					mui.toast('压缩失败！')
				});
			}
			function upload(path,id){
				var url="url";
				if(path==''){
					plus.nativeUI.alert("没有添加上传文件！");
					return;
				}
				var wt=plus.nativeUI.showWaiting();
				var flag = false;
				var mask = mui.createMask(function(){
					return flag;
				});
				mask.show();//显示遮罩  
				var task=plus.uploader.createUpload(url,
					{method:"POST"},
					function(t,status){ //上传完成
						if(status==200){
							wt.close();
							flag = true;
							mask.close();
//							alert("上传成功："+t.responseText);
                            //mui.toast('上传成功',{ duration:'long', type:'div' });
							var name = JSON.parse(t.responseText).uqfileid;
							files[id] = name;
							//console.log('name'+name);
							jQuery('#'+id).attr('name',name);
							//console.log(jQuery('#'+id).attr('name'));
							//console.log(JSON.stringify(files));
						}else{
							//alert("上传失败："+status);
                            mui.toast("上传失败："+status,{ duration:'long', type:'div' });
						}
					}
				);
				task.addData("client","file");
				task.addData("uid",getUid());
				task.addFile(path,{key:'uploadkey'});
				task.start();
			}
			function getUid(){
				return Math.floor(Math.random()*100000000+10000000).toString();
			}
			// 预览图删除功能
			jQuery('#userfile').on('click','.img-close',function (e) {
				var id=e.target.id;
				var name = jQuery('#'+id).attr('name');
				var parent = $('#'+id).parent();
				//console.log('closename'+name);
				parent.remove();
				if(name!=''){
					delete files[id];
					//console.log(JSON.stringify(files));
				}
			});
			jQuery('#userfile').on('click','img',function (e) {
				var src=e.target.src;
				var name=e.target.name;
				//console.log('src'+src)
				//console.log('name'+name)
				var data='';
				if(src!=undefined && name!=''){
					data=name
				}else if(src!=undefined && name==''){
					data=src
				}
				//console.log(src)
				displayFile(data);
			});
			var w=null;
			function displayFile(src){
				if(w){
					//alert('重复点击！');
                    mui.toast('重复点击',{ duration:'long', type:'div' });
					return;
				}
				if(!src){
					//alert('无效的媒体文件');
                    mui.toast('无效的媒体文件',{ duration:'long', type:'div' });
					return;
				}
				var name = src;
				//console.log(name);
				var suffix = name.substr(name.lastIndexOf('.'));
				var url = '';
				if(suffix=='.mov' || suffix=='.3gp' || suffix=='.mp4' || suffix=='.avi'){
					//if(unv){plus.runtime.openFile('_doc/camera/'+name);return;}
					url = '/plus/camera_video.html';
				} else {
					url = '/plus/camera_image.html';
				}
				w=plus.webview.create(url,url,{hardwareAccelerated:true,scrollIndicator:'none',scalable:true,bounce:'all'});
				w.addEventListener('loaded', function(){
					w.evalJS('loadMedia("'+src+'")');
					//w.evalJS('loadMedia("'+'http://localhost:13131/_doc/camera/'+name+'")');
				}, false );
				w.addEventListener('close', function(){
					w = null;
				}, false);
				w.show('slide-in-right');
			}
//------------------------------- 拍照  ----------------------------------------------