MUI 显示本地上传图片api 单张图片预览

MUI 显示本地上传图片api 单张图片预览

• 真正彻底的跨平台开发，不是简单的跨iOS和Android。
• 基于mui，一套HTML5工程，通过前端构建工具（如grunt）条件编译，可同时发行到iOS Appstore、安卓各大应用商店、普通手机浏览器、微信H5和流应用。
• 并且在每个平台上，都能调用该平台的专有API达到原生体验

其实枫瑞感觉MUI好像没有说的那么厉害，要说MUI唯一厉害的地方就是坑多，坑够大，足够容下1米8的我。5+plus里面提到了图片上传文件，但只显示图片路径

首先我们先看下官方的代码

<div id="dcontent" class="dcontent">
	<!-- 显示上传图片 -->
	<ul id="files" style="text-align:left;">
		<p id="empty" style="font-size:12px;color:#C6C6C6;"></p>
								
	</ul>
	<!-- 上图按钮 -->
	<div id="" class="leave-upimg" onclick="appendByGallery()"></div>
</div>

js部分

// 从相册添加文件
			function appendByGallery() {
				plus.gallery.pick(function(p) {
					appendFile(p);
				});
			}
			// 添加文件
			var index = 1;

			function appendFile(p) {
				var fe = document.getElementById("files");
				var li = document.createElement("li");
				var n = p.substr(p.lastIndexOf('/') + 1);
				li.innerText = n;
				fe.appendChild(li);
				files.push({
					name: "uploadkey" + index,
					path: p
				});
				index++;
				empty.style.display = "none";
			}

使用了官方代码成功的给领导批斗。再次感谢MUI，真的谢谢哦！

要显示预览的图片，首先我们得留出位置给图片插入 显示图片上传得地方

<!-- 显示上传图片 -->
	<ul id="files" style="text-align:left;">
		<!-- 我是插入图片 -->
		<img id="headimg" src=''  height="150"  width="150">
	</ul>
	<!-- 上图按钮 -->
	<div id="" class="leave-upimg" onclick="appendByGallery()"></div>

随后我们得获取图片路径

			 // 拍照添加文件
			function appendByCamera(){
			    plus.camera.getCamera().captureImage(function(e){
			        console.log(e);
			        plus.io.resolveLocalFileSystemURL(e, function(entry) { 
			        var path = entry.toLocalURL(); 
			        document.getElementById("headimg").src = path; 
			        //就是这里www.bcty365.com 
			        }, function(e) { 
			            mui.toast("读取拍照文件错误：" + e.message); 
			        }); 
			    
			    });    
			}
			// 从相册添加文件
			function appendByGallery(){
			    plus.gallery.pick(function(path){
			        document.getElementById("headimg").src = path; 
			
			    });
			}