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

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

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

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

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

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

<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; 
			
			    });
			}

 

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

 

 

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《MUI 显示本地上传图片api 单张图片预览》 发布于2019-07-16

赞(0) 生成海报

评论 1

6 + 3 =

长按图片转发给朋友

微信公测版本发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....