MUI 显示本地上传图片api 单张图片预览
原文来自枫瑞网地址：https://www.frbkw.com/1859/其实枫瑞感觉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"></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";
}
要显示预览的图片，首先我们得留出位置给图片插入 ，在官方代码显示图片上传得地方插入一个img
<!-- 显示上传图片 -->
<ul id="files" style="text-align:left;">
<!-- 我是插入图片 -->
<img id="headimg" src=''height="150"width="150">
</ul>
<!-- 上图按钮 -->
<div id="" class="leave-upimg"></div>
随后添加js获取图片路径
// 拍照添加文件
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;
});
}
我看成了miui :rggrg 加，很棒的帖子，支持！ 兼容性差。。 推广自己网站呢这是 君如兰 发表于 2019-7-18 14:46
我看成了miui
{:301_1000:} 哈哈万物皆MIUI ytw6176 发表于 2019-7-18 14:54
兼容性差。。
毕竟H5套壳，难受的一匹 banlv87 发表于 2019-7-18 15:10
推广自己网站呢这是
原网站先发文章，在转到吾爱 感谢分享经验 君如兰 发表于 2019-7-18 14:46
我看成了miui
我第一眼眼也看成miui了:Dweeqw
页:
[1]