mui拍照、相册选择以及上传图片(前后端代码)

mui拍照、相册选择以及上传图片(前后端代码)

 小付在此多嘴一句,这是本人的发表的第一份博客,很期待很激动,我本是java出身,但是,由于公司需要,app,公众号都了解一二,不敢奢求过多,只希望我的分享能给大家解决一点思路,这次mui的图片上传、预览等功能希望能给大家带来一定的帮助。
 mui.plusReady(function() {
   function tellphone(imgobj){
						var btnArray = [{title:"照相机"},{title:"相册"}];
				       plus.nativeUI.actionSheet({
				       title:"请选择",
				       cancel:"取消",
				       buttons:btnArray},
				       function(e){
				       var index=e.index;				     
				       switch(index){
				       case 1:
				       getImage(imgobj);
				       break;
				       case 2:
				       getImagexc(imgobj);
				       break;
				       }
				      });
						
				}
  //选择相册
	              function getImagexc(imgobj){
	                 plus.gallery.pick(function(path){		               
	                 console.log(path);              
	                 document.getElementById("uploadimg").src=path;	
	                 upload(path,imgobj);
	                // img.src = path; //获得图片路径
	                 },function(e){
	                 console.log("取消选择图片");
	                 
	                 },{filter:"image"});
	            }	
	      //调用拍照      
	 function getImage(imgobj){				
						var cmr = plus.camera.getCamera();
						cmr.captureImage(function(p){						 				
							plus.io.resolveLocalFileSystemURL(p, function(entry){
								var img_path = entry.toLocalURL();										
								var img_name = entry.name; 							   							    							    
								upload(img_path,imgobj);
								 
								var userPhone = document.getElementById("uploadimg");
								userPhone.src = img_path;
							//	$("#uploadimg").attr("src",img_path);	
							}, function(e){	
							alert("失败");						
							});
						}, function(e){						
						}, {filename:"_doc/camera/",index:1});
                 } 
function upload(p,imgobj){				   			 		 									
				var n=p.substr(p.lastIndexOf('/')+1);
				files.push({name:"uploadkey"/* +index */,path:p});	
				start_upload(imgobj);
				index++;			
				//开始上传
			
function start_upload(imgobj){			
			  if(files.length<=0){
	              	plus.nativeUI.alert("没有添加上传文件!");
		           return;
	           }
	           var server="http://本地ip:8080/RKZC.do?actions=savePhoneMail";	        
			   var wt=plus.nativeUI.showWaiting();
				var task=plus.uploader.createUpload(server,
					{method:"POST"},
					function(t,status){ //上传完成					
						if(status==200){													
							   var tmpStr = t.responseText;							
							 var json = eval('('+tmpStr+')');
							 var files2 = json.data1;							
							 if(files2==1){
							 var files1 = json.data;
							document.getElementById("uploadimg").src=files1; 
							document.getElementById("uploadimg1").src="/images/addImg.png"; 
							arr.push(files1);
							 }else{
							 var files1 = json.data;
							  document.getElementById("uploadimg").src=arr[0];
							 document.getElementById("uploadimg1").src=files1; 
							
							 }	
																			
						     	
							plus.nativeUI.alert("上传成功");						
					// document.getElementById("upload").src=url;
							wt.close();
						}else{
							alert("失败");
							wt.close();
						}
					});
				
				task.addData("uid",getUid());
				for(var i=0;i<files.length;i++){
					var f=files[i];				
					task.addFile(f.path,{key:f.name});						
				}
				task.start();
			}
			}     
function getUid(){
	          return Math.floor(Math.random()*100000000+10000000).toString();
             }			     			
});

后端代码 :使用strtus接收:

/*
	 * 
	 * savePhone上传图片
	 * */
	public ActionForward savePhoneMail(ActionMapping actionMapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) throws AppException {		  
		    String id = request.getParameter("id")==null?"":request.getParameter("id").toString();
		    String type = request.getParameter("type")==null?"":request.getParameter("type").toString();
		    String imgobj = request.getParameter("imgobj")==null?"":request.getParameter("imgobj").toString();
		    
		 
		    String fix = ".jpg";//默认将突破置为jpg格式	
			String requestURI = request.getRealPath("/")+"upload"+File.separator;
							
			File file = new File(requestURI +"upload下级目录"+File.separator);
			if (!file.exists()) {// 若文件目录不存在,则创建目录
				file.mkdirs();
			}					   
			try {
				/*MultipartRequestWrapper servletRequest = (MultipartRequestWrapper) request;
			   String aString =  servletRequest.getRequest().getMethod();*/
                int maxPostSize = 1 * 100 * 1024 * 1024; 
				MultipartRequest mr=null; 
				mr = new MultipartRequest(request, requestURI + companycode+File.separator+str1[0]+File.separator, maxPostSize, "GBK");
				
              Enumeration files = mr.getFileNames(); 
              String fileName = "";
  			  String filePath = "";
  		

  			while (files.hasMoreElements()) { 
  			fileName = (String) files.nextElement(); 
  			
  			 File uploadFile = mr.getFile(fileName);
  			 File fileNew = new File(requestURI + companycode+File.separator+str1[0]+File.separator+str1[0]+"-3-"+imgobj+fix);
  			uploadFile.renameTo(fileNew); 
  			System.out.println("FileName============"+fileName);
  			String fileName1=getCode(6);
  			//用此方法得到上传文件的真正的文件名,这里的fileName指文件输入类型的名称 
  			filePath = mr.getFilesystemName(fileName); 
  			System.out.println("FilePath============"+filePath); 
  			//此方法得到一个文件对象,代表储存在服务器上的fileName文件 
  			File f = mr.getFile(fileName); 			
  			System.out.println("FilePath============"+f); 
  			String path=request.getSession().getServletContext().getRealPath("") ;
  		    String aString =	fileNew.getPath().toString().substring(path.length());
  		      System.out.println(aString);
  			JSONObject jsonObject = new JSONObject();
			jsonObject.put("data", aString);
			jsonObject.put("data1", imgobj);		
			PrintWriter out = response.getWriter();
			out.print(jsonObject.toString());
			out.flush();
  			if (null == f) 
  			throw new ServletException("file is not exist"); 
  			deleteFile(uploadFile);
  			}
  			
  			
  			 
  		//可以取得请求参数的名称 
			Enumeration enum1=mr.getParameterNames(); 
			while (enum1.hasMoreElements()) { 
			String s=(String)enum1.nextElement(); 
			System.out.println(s); 
			String[] str=mr.getParameterValues(s); 
			for (int i=0;i<str.length;i++){ 
			System.out.println(str[i]); 
			} 
			} 
			} catch (Exception e) {
				e.printStackTrace();
				// TODO: handle exception
			}

			return null;

	}
	

效果图

拍照样式上传成功

有不懂的请加qq:214321221

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值