zoukankan      html  css  js  c++  java
  • mui调用本地相册调用相机上传照片

    调用mui的常用库和jquery

    html部分:

    <header class="mui-bar mui-bar-nav">
    			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    			<h1 class="mui-title">上传照片</h1>
    			<a class="mui-icon-right-nav mui-pull-right">
    				<span id="headImage" class="mui-icon mui-icon-camera"></span>
    			</a>
    			<a class="mui-icon-right-nav mui-pull-right">
    				<span id="uploadImage" class="mui-icon mui-icon-upload"></span>
    			</a>
    		</header>
    		<div class="mui-content" style="background-color:#fff">
    			<!-- 图片容器 -->
    			<ul id="imgs" class="mui-table-view mui-grid-view">
    				<li class="mui-table-view-cell mui-media mui-col-xs-4">
    					<img class="mui-media-object" src="images/60x60.gif">
    					<span class="mui-icon mui-icon-trash deleteBtn" onclick="deleteImg(event)"></span>
    				</li>
    				
    			</ul>
    		</div>
    

      

    js部分:

    <script type="text/javascript">
    			mui.init();
    			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/"
    				})
    			}
    			// 从相册中选择图片   
    			function galleryImg() {
    				// 从相册中选择图片  
    				plus.gallery.pick(function(e) {
    					for (var i in e.files) {
    						var fileSrc = e.files[i];
    						setFile(fileSrc);
    						setHtml(fileSrc);
    					}
    				}, function(e) {
    					console.log("取消选择图片");
    				}, {
    					filter: "image",
    					multiple: true,
    					//maximum: 5,
    					system: false,
    					onmaxed: function() {
    						plus.nativeUI.alert('最多只能选择5张图片');
    					}
    				});
    			}
    
    			//删除当前照片--删除当前元素的整个父级元素
    			function deleteImg(event) {
    				var obj = event.srcElement;
    				obj.parentElement.remove();
    			}
    
    			function setHtml(path) {
    				var str = '';
    				str = '<li class="mui-table-view-cell mui-media mui-col-xs-4">' +
    					'<img class="mui-media-object" src="' + path + '">' +
    					'<span class="mui-icon mui-icon-trash deleteBtn" onclick="deleteImg(event)"></span>' +
    					'</li>';
    				jQuery("#imgs").append(str);
    			}
    
    			function setFile(fileSrc) {
    				var image = new Image();
    				image.src = fileSrc;
    				fileArr.push(image);
    			}
    			
    			document.getElementById('uploadImage').addEventListener('tap', function() {
    				var files = fileArr;
    				var wt = plus.nativeUI.showWaiting();
    				var task = plus.uploader.createUpload('http://127.0.0.1:8848/weizhen_app/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();
    			});
    		</script>
    

     

  • 相关阅读:
    asp.net(C#)页面事件顺序
    C#多线程学习 之 线程池[ThreadPool]
    JS 获取浏览器窗口大小
    关于Json的那点事
    jquery 动态滚动
    Null,DBNull,String.Empty 区别 C# 转载
    js图片大小限制,设置
    mysql 自定义函数获取两点间距离
    KindleConverter:Word批量转换为6寸PDF
    在 Asp.NET MVC 中使用 SignalR 实现推送功能
  • 原文地址:https://www.cnblogs.com/iverson666/p/10621084.html
Copyright © 2011-2022 走看看