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

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 单张图片预览

 

 

分享到 :
相关推荐

uni-app最简单的手写上拉加载不用插件

在longlongago枫瑞也写过一个关于uni-app上拉加载的文章,整体来说[&...

uni-app新手如何实现一个简单的选项卡

欢迎来到自学程序员掉头发之uni-app如何实现一个简单的选项卡,Uni-app中有...

uni-app 前后端实战课 -《悦读》百度云视频

uni-app前后端实战课-《悦读》百度云视频uni-app实战教程R[&he...

uni星茫视频配置教程安装hbuilder修改代码

《哈尔的移动城堡》里有这样一句话,不如就承认一下,我们没有那样坚强,也不想那样刀枪不...

发表评论

邮箱地址不会被公开。 必填项已用*标注

评论(1)