首页 » MUI » MUI上传图片案例9宫格图片多选删除

首先万恶的开头介绍一下LJ的 MUI

 

  • 真正彻底的跨平台开发,不是简单的跨iOS和Android。
  • 基于mui,一套HTML5工程,通过前端构建工具(如grunt)条件编译,可同时发行到iOS Appstore、安卓各大应用商店、普通手机浏览器、微信H5和流应用。
  • 并且在每个平台上,都能调用该平台的专有API达到原生体验

官方说什么都对!本案例由网络收集有以下功效,包治甲方**百病

  1. 支持拍照,相册选择
  2. 支持上传到服务器
  3. 支持多选图片 大概9张吧
  4. 支持点击删除图片

文中一张图,一刀9999(作图太累 随意放一张)

MUI上传图片案例9宫格图片多选删除

 

整体源码包下载:

链接: https://pan.baidu.com/s/1xxPqN8N9Nlt_bpyypb9aBQ 提取码: sckp

 

大佬直接看源码构造

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/previewImage.css" />
		<style>
			#imgaes{
				padding: 0rem;
				margin: 0rem;
			}
			img{
				height: auto;
				width: 100%;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>

		<div class="mui-content">

			<div style="text-align: center; padding: 50px;">
				<input type="button" id="headImage" value="附件" />
				<input type="button" id="uploadImage" value="上传" />
			</div>

			<!--放图片元素-->
			<ul id="imgaes">
			</ul>

		</div>

		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="js/mui.previewimage.js"></script>
		<script type="text/javascript" src="js/mui.zoom.js"></script>
		<script>
			//附件上传成功后返回的json
			var fileJson = "";
			//上传附件
			var fileArr = [];
			var urls = [];
			var imagess = [];
			// 拍照获取图片  
			function getImage(imgsUI) {
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径  
						setFile(imgSrc);
						setHtml(imgSrc, imgsUI);
						urls = [];
						imagess = [];
						loadImgs();
					}, function(e) {
						console.log("读取拍照文件错误:" + e.message);
					});
				}, function(s) {
					console.log("erroraaa" + s.message);
				}, {
					filename: "_doc/camera/"
				})
			}

			function getHeadImage(imgsUI) {

				if(mui.os.plus) {
					var buttonTit = [{
						title: "拍照"
					}, {
						title: "从手机相册选择"
					}];

					plus.nativeUI.actionSheet({
						title: "上传图片",
						cancel: "取消",
						buttons: buttonTit
					}, function(b) { /*actionSheet 按钮点击事件*/
						switch(b.index) {
							case 0:
								break;
							case 1:
								getImage(imgsUI); /*拍照*/
								break;
							case 2:
								galleryImg(imgsUI); /*打开相册*/
								break;
							default:
								break;
						}
					})
				}

			}

			function setFile(fileSrc) {
				var image = new Image();
				image.src = fileSrc;
				fileArr.push(image);
			}

			function setHtml(path, imgsUI) {

//				var str = '';
				var str = '<li id="lookImg" class="mui-table-view-cell mui-media mui-col-xs-6">' +
					'<div class="mui-content-padded">' +
					'<img class="mui-media-object" src="' + path + '" data-preview-src="" data-preview-group="1">' + //《注意》:data-preview-group="1"这里为分组设置,如果界面中有多个div中放不同图片,那么这里要为每个组设置一个不同的值。
					'<span class="mui-icon mui-icon-trash deleteBtn"></span>' + //这里是删除图片接钮
					'</div>' +
					'</li>';
				$("#imgaes").append(str);
			}

			// 监听点击图片大图浏览
			$(".mui-content").on('tap', '.mui-content-padded img', function() {

			});
			// 监听点击大图浏览图片返回
			$("body").on("tap", "#__MUI_PREVIEWIMAGE", function() {

			})

			// 监听图片的删除点击
			mui("body").on('tap', '.mui-content-padded span', function() {
				$(this).closest("li").hide(800, function() {
					$(this).closest("li").remove();
					urls = [];
					imagess = [];
					loadImgs()
				});
			});

			function loadImgs() {
				// 获取图片地址列表
				var images = document.querySelectorAll('.mui-content-padded img');

				imagess = images;
				for(var i = 0; i < images.length; i++) {
					urls.push(images[i].src);
				}
			}

			//图片上传
			function uploadImage() {
				var files = new Array();
				$(".mui-content-padded").each(function(index) {
					var imgurl = $(this).find('img').attr('src');
					var image = new Image();
					image.src = imgurl;
					files.push(image);
				});
				if(!files) {
					return;
				}

				console.log("上传中...");
				

				//获取token信息
				var appToken = localStorage.getItem("appToken");
				var tokenHeader = localStorage.getItem("tokenHeader");
				//上传路径
				var mainUrls = serverip + "api/innerapi/file_upload";
				var task = plus.uploader.createUpload(mainUrls, {
					method: "POST",
					headers: {
						"Content-Type": "multipart/form-data"
					}
				}, function(t, status) { //上传完成
					mui.hideLoading();
					if(status == 200) {
						var filestr = eval('(' + t.responseText + ')');
						var fileData = filestr.data;
						fileJson = fileData;
						mui.toast('上传成功', {
							duration: 1000,
							type: 'div'
						});
					} else {
						alert("上传失败:" + status);

					}
				}); //将文件集合添加到上传队列中


			
				task.addFile(files[0].src, {
					key: "file"
				});
				//上传时带token信息
				task.setRequestHeader(tokenHeader, appToken);
				//添加其他参数
				task.addData("fileFrom", "信息发布");
				task.addData("attachType", "1");
				//开始上传
				task.start();
			}
			// 从相册中选择图片   
			function galleryImg(imgsUI) {

				// 从相册中选择图片  
				plus.gallery.pick(function(e) {

					for(var i in e.files) {
						var fileSrc = e.files[i];
						setFile(fileSrc);
						setHtml(fileSrc, imgsUI);
					}
					urls = [];
					imagess = [];
					loadImgs();

				}, function(e) {
					if(e.code == 8) { //没有权限 
						var btnArray = ["确定"];
						mui.confirm('请在【设置】-【项目名称】中打开相机及相册权限!', '相册权限未开', btnArray, function(e) {
							if(e.index == 1) {

							} else {

							}
						})
					}
					console.log("取消选择图片");
				}, {
					filter: "image",
					multiple: true,
					maximum: 1,
					system: false,
					onmaxed: function() {
						onAlert('最多只能选择1张图片');
					}
				});
			}
			
			

			//点击拍照及本地相册事件
			$("#headImage").on("tap", function() {
				getHeadImage("#images");
			})

			//点击附件上传事件
			$("#uploadImage").on("tap", function() {
				uploadImage();
			})
			
			//大图浏览
			mui.previewImage(); 
		</script>

	</body>

</html>

 

标签:

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《MUI上传图片案例9宫格图片多选删除》 发布于2019-07-23

赞(0) 生成海报

评论 6

7 + 8 =
  1. 用模拟器测试

    管理员枫瑞博客9个月前 (12-10)
  2. #0

    这个选择图片后页面上没有显示哦,就一个删除的按钮在哪里,是什么原因呢

    neloge9个月前 (12-09)
  3. #0

    ? ? 测试下发布讨论

    neloge9个月前 (12-09)
  4. #0

    这个选择图片后页面上没有显示哦,就一个删除的按钮在哪里,是什么原因呢

    杨天龙11个月前 (10-18)
  5. #0

    :twisted: :neutral: 测试下发布讨论

    delayboy12个月前 (09-26)

长按图片转发给朋友

微信公测版本发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....