吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 2979|回复: 9
收起左侧

[其他转载] MUI 显示本地上传图片api 单张图片预览

[复制链接]
fengrui99 发表于 2019-7-18 14:32
原文来自枫瑞网地址:https://www.frbkw.com/1859/

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

首先我们先看下官方的代码
[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; 
			
			    });
			}


5044e9e62475203.png


发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

君如兰 发表于 2019-7-18 14:46
我看成了miui
御河 发表于 2019-7-18 14:53
ytw6176 发表于 2019-7-18 14:54
banlv87 发表于 2019-7-18 15:10
推广自己网站呢这是
 楼主| fengrui99 发表于 2019-7-18 15:23

哈哈万物皆MIUI
 楼主| fengrui99 发表于 2019-7-18 15:26

毕竟H5套壳,难受的一匹
 楼主| fengrui99 发表于 2019-7-18 15:27
banlv87 发表于 2019-7-18 15:10
推广自己网站呢这是

原网站先发文章,在转到吾爱
西元世纪爱 发表于 2019-7-18 15:58
感谢分享经验
王者农药 发表于 2019-7-18 16:46

我第一眼眼也看成miui了
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-16 11:57

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表