手机端图片批量查询mui

最新推荐文章于 2021-06-03 12:55:05 发布

原创最新推荐文章于 2021-06-03 12:55:05 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mui #手机端批量图片

本文主要介绍如何利用mui框架在手机端进行图片的批量查询操作，包括相关API的使用和优化技巧。

发帖

		<!-- <div class="mui-content" style="background-color:#fff"> -->
			<ul id="imgs">
				<li class=" mui-media mui-col-xs-4" id="headImage">
					<img class="mui-media-object" src="../../img/upload_img.png">
					<span class="mui-icon mui-icon-trash deleteBtn " style="visibility: hidden;"></span>					
				</li>
			</ul>
		<!-- </div> -->			
	</div>
	<script src="../../js/lib/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>	
	<script>
	var fileArr = [];

mui.init({
swipeBack: true //启用右滑关闭功能
});

document.getElementById(‘headImage’).addEventListener(‘tap’, function() {
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(); /*拍照*/
				break;
			case 2:
				galleryImg(); /*打开相册*/
				break;
			default:
				break;
		}
	})
}

}, false);

// 拍照获取图片
function getImage() {
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);
}, function(e) {
console.log(“读取拍照文件错误：” + e.message);
});
}, function(s) {
console.log(“error” + s.message);
}, {
filename: “_doc/camera/”
})
}
// 从相册中选择图片
var lfs = null;

function setHtml(path) {
var str = ‘’;
str = ‘

’ +
‘’ +
‘’ +
‘
’;
jQuery(str).insertBefore("#headImage");
isShow()
}

function setFile(fileSrc) {
var image = new Image();
image.src = fileSrc;
fileArr.push(image);
console.log(fileSrc)
console.log(JSON.stringify(image))
console.log(JSON.stringify(fileArr))
}
function dele(){
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲imgs").on('clic\dots$ (this).parent(‘li’))
var li = $(this).parent(‘li’)
var index = $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲imgs li").index\dots$ ("#imgs").find(li)))
$("#imgs").find(li).remove()
isShow()
})
}

document.getElementById(‘uploadImage’).addEventListener(‘tap’, function() {
var files = fileArr;
```
var wt = plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload('http://192.168.1.111:8181/sys-privilege/Upload', {
		method: "POST"
	},
	function(t, status) { //上传完成
		if (status == 200) {
			alert("上传成功：" + t.responseText);
			wt.close(); //关闭等待提示按钮
		} else {
			alert("上传失败：" + status);
			wt.close(); //关闭等待提示按钮
		}
	}
);
//将文件集合添加到上传队列中
for (var i = 0; i < files.length; i++) {
	var f = files[i];
	task.addFile(f.src, {
		key: i
	});
}
//传其他的参数 如备注
//添加其他参数
//遍历5个input框

task.addData("comment", "test");
task.start();
```
});
function isShow() {
console.log( $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲imgs li").lengt\dots$ ("#imgs li").length > 9) {
$("#headImage").hide()
} else {
$("#headImage").show()
```
}
```
}
```
	</script>

</body>
```