hbuilder+mui+html5 Plus+strtus手機app拍照上傳

阿新 • • 發佈：2019-01-21

1.html結構

<div class="imagediv" >
				<ul class="mui-table-view" style="padding-top: 5px;">
					<li>
						<img src="../images/iconfont-tianjia.png" class="imageup"
							id="addnew" width="70px;" height="70px;">
					</li>
				</ul>
			</div>

2.js部分

//圖片上傳開始
	function plusReady(){  
		mui("body").on("tap",".imageup",function(){ 
			page.imgUp(); 
		})
	}
	var page=null;
	page={
		imgUp:function(){
			var m=this;
			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){
			plus.io.resolveLocalFileSystemURL(e, function(entry) { 
				var path = entry.toLocalURL();//圖片本地路徑
				var name=entry.name//圖片名稱
				showImage(path,name)
			}, function(e) { 
				mui.toast("讀取拍照檔案錯誤：" + e.message); 
			}); 
		});
	}
	//從相簿選擇
	function appendByGallery(){
		plus.gallery.pick(function(path){
			plus.io.resolveLocalFileSystemURL(path, function(entry) {
				var name=entry.name
				showImage(path,name)
			}, function(e) {
				plus.nativeUI.toast("讀取拍照檔案錯誤：" + e.message);
			});
		});
	}
	//圖片顯示說明：根據自己的業務邏輯來寫，此處，我是需要圖片的原來name和上傳之後的name放到了隱藏域裡，不需要的可以去掉
	function showImage(path,name){
		$(".imagediv ul").prepend("<li class='imageli add'><input name='image' class='image' type='hidden' value='"+name+"'><input name='file' class='file' type='hidden'><img src='" + path + "'/></li>");  
		compressImage(path,name)
	}
	//產生隨機數
	function RndNum(n){
		var rnd="";
		for(var i=0;i<n;i++)
			rnd+=Math.floor(Math.random()*10);
			return rnd;
	}
	//圖片壓縮
	function compressImage(url,filename){
		var lourl="_doc/upload/"+RndNum(5)+"_"+filename;//壓縮轉換路徑
		plus.zip.compressImage({
			src:url,
			dst:lourl,
			quality:20,
			overwrite:true
		},
		function(event) {
			var path = lourl;//壓縮轉換目標圖片的路徑
			upImage(path)//圖片上傳
		},
		function(error) {
			plus.nativeUI.toast("壓縮圖片失敗，請稍候再試");
		});
	}
	//上傳圖片
	function upImage(path){
		plus.nativeUI.showWaiting();
		var server = "......"//action的url
		var task=plus.uploader.createUpload(server,
					{method:"POST"},
					function(t,status){ //上傳完成
						if(status==200){
							var name=t.responseText//上傳之後返回的圖片名稱
							$(".imagediv ul .add .file").val(name)
							$(".imagediv ul").find("li").removeClass("add")
							plus.nativeUI.closeWaiting();
						}else{
							plus.nativeUI.closeWaiting();
						}
					}
				);
		task.addFile(path,{key:"file"});
		task.start();
	} 
	if(window.plus){
		plusReady();
	}else{
		document.addEventListener("plusready",plusReady,false);  
	}
//圖片上傳結束

//圖片點選刪除
	$(".imagediv").on("tap",".imageli img",function(){ 
		var image = this
		var liobj=image.parentElement
		$(".imagediv ul").find("li").removeClass("del")
		liobj.className ="imageli del"
		var imagesrc=image.src
		plus.nativeUI.showWaiting()
		var url ="........&imagesrc="+imagesrc//action的url帶著圖片的路徑引數，用於刪除頁面的圖片顯示
		mui.openWindow( {
			url : 'viewStyle01.html',
			id : 'zl-p-11',
			
			createNew : true,
			preload : false,
			extras : {
				title : "刪除圖片",
				url : url,
				remote : true,
				rightButton : {
					show : false
				}
			},
			show : {
				autoShow : true
			},
			waiting : {
				autoShow : false
			}
		});
		plus.nativeUI.closeWaiting();
	})
	window.addEventListener('delImage', function(e){//刪除頁面返回時觸發，用於重新整理頁面
		var obj=e.detail
		var tag=obj.tag
		if(tag==1){
			$(".del").remove()
		}else{
			$(".del").attr("class","imageli")
		}
	});
//圖片點選刪除結束

3.圖片刪除頁面

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Insert title here</title>
		<%
			String imagesrc = request.getParameter("imagesrc");
		%>
	</head>
	<body>
		<img alt="" src="<%=imagesrc%>" width="100%" height="100%">
		<button type="button" id="delImage" class="mui-btn mui-btn-danger" style="width: 100%;height:50px" >
			刪除
		</button>
	</body>
	<script type="text/javascript">
	jQuery("#delImage").click(function(){
		var btnArray = ['確定', '取消'];
		mui.confirm('要刪除這張照片嗎？', '提示', btnArray, function(e) {
			var data=""
			if (e.index == 0) {
				 data = {"tag" : "1"}
			} else {
				 data = {"tag" : "0"}
			}	
			var list = plus.webview.currentWebview().opener();
			mui.fire(list, 'delImage', data);
			var old_back = mui.back;
			old_back();
		})
	})
	
	</script>
</html>

4.java後臺實體部分

package ;

import org.apache.struts.scaffold.BaseForm;
import org.apache.struts.upload.FormFile;
public class ImageForm extends BaseForm {
	 /**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private FormFile file;  
	    private String uploadContentType;  
	    private String uploadFileName;  
	  
	  
	    public FormFile getFile() {
			return file;
		}

		public void setFile(FormFile file) {
			this.file = file;
		}

		public String getUploadContentType() {  
	        return uploadContentType;  
	    }  
	  
	    public void setUploadContentType(String uploadContentType) {  
	        this.uploadContentType = uploadContentType;  
	    }  
	  
	    public String getUploadFileName() {  
	        return uploadFileName;  
	    }  
	  
	    public void setUploadFileName(String uploadFileName) {  
	        this.uploadFileName = uploadFileName;  
	    }

	  
}

5.圖片上傳action和跳轉刪除頁面action

/**
	 * 附件上傳
	 * @throws IOException 
	 */
	public void upload(ActionMapping actionMapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) throws IOException {
		AdsImageForm file = (ImageForm) form;
		FormFile afile = file.getFile();// report_data2.txt獲取的是檔案 不是檔名
		String filename = "";
		String filepath = "";//圖片上傳到哪裡的路徑，自己寫
		directory.createdir(filepath);
		try {
			filename = "newfilename"+ ".jpg";// 自定義一個新的檔名稱;
			// 儲存到路徑裡面的程式碼
			InputStream is = afile.getInputStream();
			OutputStream bos = new FileOutputStream(filepath + "/" + filename);
			int bytesRead = 0;
			byte[] buffer = new byte[8192];
			while ((bytesRead = is.read(buffer, 0, 8192)) != -1) {
				bos.write(buffer, 0, bytesRead);
			}
			bos.close();
			is.close();
		} catch (IOException ioe) {
		}
		response.getWriter().write(filename);

	}
	public ActionForward deleteImage(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {

		return mapping.findForward("deleteImage");
	}

6.strtus的xml配置根據自己實際情況寫就行

<form-bean name="ImageForm" type=""></form-bean>
<action path="" type="" parameter="method" name="ImageForm" scope="request">
			<forward name="deleteImage" path=""/>
		</action>

hbuilder+mui+html5 Plus+strtus手機app拍照上傳

1.html結構<div class="imagediv" > <ul class="mui-table-view" style="padding-top: 5px;"> <li> <img src=".

HTML5手機端拍照上傳

最近在嘗試做手機端拍照上傳的專案，之前用微信JS-SDK 發現有時候上傳照片會有問題，下載後的照片只有一半。所以改用了HTML5上傳，在做這一點上傳中也學習了一下JS和HTML5的一些標籤。記錄一下。首先需要在頁面新增HTML5控制元件 capture="camera

手機APP頭像上傳 Hbuider前端 PHP後端完整程式碼（已測試通）

本程式碼是在Hbuider基礎上做得開發，話不多說直接上程式碼：前端： HTML程式碼： <div class="users"> <div id='output'>頭像</div> <div id='dcontent' &g

基於html5、JS實現的拍照上傳圖片

原理：調出攝像頭，拍照儲存到畫布，將圖片URi傳送到後臺前端程式碼（Index.cshtml）： <style> #video,#canvas {display: block;margin:1em auto;width:180px;height:180px

手機APP拍照識別營業執照營業執照拍照識別

最近，在下和朋友聊起來創業，創業就一定會申請營業執照。那麼社會上那麼多營業執照，該怎麼整理呢？我們推出了營業執照識別SDK，對於每一個企業而言，營業執照就如“身份證”一般，是企業的唯一ID，在辦理和企業相關的業務中，經常涉及到對企業營業執照資訊的錄入。因為企業營業執照的文字資訊非常多，錄入起

HTML5 APP應用實現圖片上傳及拍照上傳功能

HTMl5 APP手機端程式碼： <video id="myVideo" autoplay="autoplay"></video> <br /> <input type="button" value="拍照" />

HTML5 實現手機拍照上傳

圖片壓縮處理：因為要做的是手機拍照上傳，現在的手機拍照片都很大，比如小米4S，大小在3M以上，如果原圖上傳，太消耗使用者流量，於是要解決圖片壓縮的問題。通過change事件，監聽圖片上傳，通過readerAsDataURL獲取上傳的圖片。 document.getElementById( 'img')

MUI+H5手機上傳照片支援多圖片上傳和拍照上傳

html程式碼：<header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><

html5呼叫手機攝像頭，實現拍照上傳功能

http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html 今天做手機網站，想實現手機掃描二維碼功能。首先實現在瀏覽器中呼叫手機攝像頭，實現拍照功能並且把拍下的照片顯示在頁面並上傳到伺服器

蘋果手機（ios）拍照上傳圖片旋轉90度問題---java後臺處理

需要先匯入包 metadata-extractor-2.3.1.jar 地址 https://github.com/drewnoakes/metadata-extractor/releases?after=2.7.0 xmpcore-5.1.2.jar 依賴包 maven下載 med

HTML5+ 拍照上傳和選擇檔案上傳

HTML 頁面內容包含以下標籤即可: <input id="btn_select" type="button" value="從相簿選擇" /> <inpu

HTML5 手機端圖片上傳預覽

1、html頁面 <div class="addFile"> <p class="company">資料上傳</p> <div class="photoes getoutinput"> <div class="uplist">

部分vivo和oppo手機，使用上傳圖片功能，可能會出現退出webview的現象(回退到app的入口頁面)

在公司的app裡面嵌入了一個h5頁面，h5頁面有個使用圖片上傳功能，上傳圖片出現閃退的現象問題描述： vivo手機，在app內的wap頁面使用上傳圖片的功能，在選擇好圖片點選確認按鈕後，出現退出整個webview，回退到app該wap頁面的入口頁面，且app自動重新整理了該入口頁面

手機的web頁面呼叫相機拍照上傳

想在手機裡的web頁面裡上傳照片，又希望能呼叫攝像頭拍完了再上傳。 <input type="file" capture="camera" accept="image/*" id="filetest" name="filetest"> 看這程式碼，重要的是capture

使用mui框架，蘋果手機不顯示上拉重新整理更多

突然發現在上拉重新整理列表時候，操作過快資料出現重複問題，改了一下午發現以下幾個問題： 1、對於上拉重新整理，安裝手機與蘋果手機是走mui不同的方法； 2、現在mui最新版本已經解決了上拉重新整理重複問題，如果你使用的是MUIv3.6.0及一下版本，這個問題還沒解決，但是

基於html5 JS實現的拍照上傳圖片

HBuilder MUI開發時genymotion模擬器連不上Hbuilder解決辦法

注意：1. 不能省去前面的.\ ，指定當前路徑，因為path環境變數中有androidsdk的路徑，會執行到那個adb，那個adb啟動的時候會先kill掉當前的adb，需要明確指定是執行的hbuilder的adb；2. 後面那堆ip和埠怎麼得到的，在kill所有adb.exe程序啟動genymotion模擬器

如何使用HTML5實現拍照上傳應用

在HTML5規範的支援下，WebApp在手機上拍照已經成為可能。在下面，我將講解Web App如何用手機進行拍照，顯示在頁面上並上傳到伺服器。1、視訊流 HTML5 The Media Capture API提供了對攝像頭的可程式設計訪問，使

三星手機拍照,上傳照片或者下載導致圖片旋轉90°的解決辦法。

專案需求。因為專案中需要對拍照之後的圖片進行上傳。（這也是一個簡單的問題）但是就是三星手機（三星note3)，出現拍照之後照片旋轉了九十度。然後我們上傳上去，然後通過其他手機請求url再次顯示還是旋轉過的。說說我們解決問題的路徑。

利用html5呼叫本地攝像頭拍照上傳圖片

hbuilder+mui+html5 Plus+strtus手機app拍照上傳

相關推薦