MUI上传图片案例9宫格图片多选删除
本帖最后由 fengrui99 于 2019-7-24 15:25 编辑转载文章来自：https://www.frbkw.com/1874/
提示：在百度网盘下载文件后，需要导入hbuilder工具使用模拟器运行才有效果哦！上传功能要自己配置下服务器
首先万恶的开头介绍一下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="' + 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.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.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;
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>
谢谢楼主分享 下载下来放到PHPstudy上，手机打开点击都没反应，微信和QQ浏览器点击上传都没反应 本帖最后由 fengrui99 于 2019-7-24 15:24 编辑
Mr.Lih 发表于 2019-7-24 15:21
下载下来放到PHPstudy上，手机打开点击都没反应，微信和QQ浏览器点击上传都没反应
这个是带plus 需要在hbuilder 中使用真机提调试，点击上传要自己配置下服务器配置哦 确实不错，支持一下
支持一下 fengrui99 发表于 2019-7-24 15:21
这个是带plus 需要在hbuilder 中使用真机提调试，点击上传要自己配置下服务器配置哦
好的，，明白了 袁煜914 发表于 2019-7-24 16:33
好厉害，谢谢楼主啦，嗯呢
网络收集的哈哈
页:
[1]