原文来自枫瑞网地址:https://www.frbkw.com/1859/
其实枫瑞感觉MUI好像没有说的那么厉害,要说MUI唯一厉害的地方就是坑多,坑够大,足够容下1米8的我。5+plus里面提到了图片上传文件,但只显示图片路径
首先我们先看下官方的代码
[Asm] 纯文本查看 复制代码 <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部分
[Asm] 纯文本查看 复制代码 // 从相册添加文件
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
[Asm] 纯文本查看 复制代码 <!-- 显示上传图片 -->
<ul id="files" style="text-align:left;">
<!-- 我是插入图片 -->
<img id="headimg" src='' height="150" width="150">
</ul>
<!-- 上图按钮 -->
<div id="" class="leave-upimg"></div>
随后添加js获取图片路径
[Asm] 纯文本查看 复制代码
// 拍照添加文件
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;
//就是这里[url]www.bcty365.com[/url]
}, function(e) {
mui.toast("读取拍照文件错误:" + e.message);
});
});
}
// 从相册添加文件
function appendByGallery(){
plus.gallery.pick(function(path){
document.getElementById("headimg").src = path;
});
}
|