hbuilder+mui+html5 Plus+strtus手機app拍照上傳
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實現的拍照上傳圖片
<style> #video,#canvas {display: block;margin:1em auto;width:180px;height:180px;} #snap { display: block;margin:0 auto;width:80%;he
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呼叫本地攝像頭拍照上傳圖片
<script> //判斷瀏覽器是否支援HTML5 Canvas window.onload = function () { try { //動態建立一個canvas元 ,並獲取他2Dcont