首先万恶的开头介绍一下LJ的 MUI
- 真正彻底的跨平台开发，不是简单的跨iOS和Android。
- 基于mui，一套HTML5工程，通过前端构建工具（如grunt）条件编译，可同时发行到iOS Appstore、安卓各大应用商店、普通手机浏览器、微信H5和流应用。
- 并且在每个平台上，都能调用该平台的专有API达到原生体验
官方说什么都对！本案例由网络收集有以下功效，包治甲方**百病
- 支持拍照，相册选择
- 支持上传到服务器
- 支持多选图片 大概9张吧
- 支持点击删除图片
文中一张图，一刀9999（作图太累 随意放一张）
整体源码包下载：
链接: 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="'%20+%20path%20+%20'" 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>
声明：
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：ceo@zunw.cn，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
