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