mui 移动端调用相册或拍照，截图后上传到服务器端实例

用心去追梦

于 2019-11-01 15:22:43 发布

阅读量497

点赞数

分类专栏：前端文章标签： mui 移动端调用相册或拍照，截图后上传到服务器端实例

本文链接：https://blog.csdn.net/qq_33240556/article/details/102858355

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<title></title>
	<link rel="stylesheet" href="css/mui.min.css" />
	<script src="js/mui.min.js"></script>
	<script src="js/jquery-3.2.1.js"></script>
	<style>
		.imageup {
			width: 100px;
			height: 36px;
			line-height: 36px;
		}
		
		.button {
			width: 100px;
			height: 50px;
			line-height: 50px;
		}
		
		ul li p {
			display: inline-block;
		}
	</style>
</head>

<body>
	<ul class="list">
		<li class='mui-table-view-cell mui-media'>
			<img id="headimg" class="headimg" src='' height="150" width="150">
			<p>
				<a class="imageup 1">上传图片</a>
			</p>
			<p><button onclick="upload();" class='button'> 提交</button></p>
		</li>

	</ul>

	<script>
		//扩展API完成后执行的操作
		function plusReady() {
			//给选中的li增加判别class
			$(".list li").on("tap", ".imageup", function() {
				var $li = $(this).parents("li");
				console.log($($li).text())
				$li.addClass("selectLi");
				$li.siblings().removeClass("selectLi");
				page.imgUp();
			})
		}

		//弹出系统按钮选择框
		var page = null;
		page = {
			imgUp: function() {
				var m = this;
				/* console.log(m);*/
				plus.nativeUI.actionSheet({
					cancel: "取消",
					buttons: [{
							title: "拍照"
						},
						{
							title: "从相册中选择"
						}
					]
				}, function(e) { //1 是拍照  2 从相册中选择 
					switch(e.index) {
						case 1:
							appendByCamera();
							break;
						case 2:
							appendByGallery();
							break;
					}
				});
			}
		}

		// 拍照添加文件
		function appendByCamera() {
			plus.camera.getCamera().captureImage(function(e) {
				console.log("e is" + e);
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var path = entry.toLocalURL();
					var indexa = liIndex()
					console.log(indexa);
					$(".headimg")[indexa].src = path;
				}, function(e) {
					mui.toast("读取拍照文件错误：" + e.message);
				});

			});
		}
		// 从相册添加文件
		function appendByGallery() {
			plus.gallery.pick(function(path) {
				var indexa = liIndex();
				console.log(indexa);
				$(".headimg")[indexa].src = path;
			});
		}

		//服务端接口路径
		var server = "http://www.test.cn/aaa.php";
		//获取图片元素
		var files = document.getElementById('headimg');
		// 上传文件
		function upload() {
			var wt = plus.nativeUI.showWaiting();
			var task = plus.uploader.createUpload(server, {
					method: "POST"
				},
				function(t, status) { //上传完成
					if(status == 200) {
						alert("上传成功：" + t.responseText);
						wt.close(); //关闭等待提示按钮
					} else {
						alert("上传失败：" + status);
						wt.close(); //关闭等待提示按钮
					}
				}
			);
			//添加其他参数
			task.addData("name", "test");
			task.addFile(files.src, {
				key: "dddd"
			});
			task.start();
		}

		//判断点击的是上传的第几个li             
		function liIndex() {
			var lis = $(".list").children();
			console.log(lis.length)
			for(var i = 0; i < lis.length; i++) {
				console.log($(lis[i]).attr("class"))
				var lisClass = $(lis[i]).attr("class").split(" ");
				if(lisClass[2] == "selectLi") {
					console.log(i);
					return i;
				}
			}
		}

		//扩展API是否准备好，如果没有准备好则监听plusReady 
		if(window.plus) {
			plusReady();
		} else {
			document.addEventListener("plusready", plusReady, false);
		}
	</script>
</body>

用心去追梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mui 移动端调用相册或拍照，截图后上传到服务器端实例

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta http-equiv="Access-...
复制链接

扫一扫