HTML5Plus怎么實(shí)現(xiàn)手機(jī)APP拍照或相冊選擇圖片上傳功能
小編給大家分享一下HTML5 Plus怎么實(shí)現(xiàn)手機(jī)APP拍照或相冊選擇圖片上傳功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比隆安網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式隆安網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋隆安地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
利用HTML Plus的Camera、GalleryIO、Storage和Uploader來實(shí)現(xiàn)手機(jī)APP拍照或者從相冊選擇圖片上傳。Camera模塊管理設(shè)備的攝像頭，可用于拍照、攝像操作，通過plus.camera獲取攝像頭管理對象。Gallery模塊管理系統(tǒng)相冊，支持從相冊中選擇圖片或視頻文件、保存圖片或視頻文件到相冊等功能。通過plus.gallery獲取相冊管理對象。IO模塊管理本地文件系統(tǒng)，用于對文件系統(tǒng)的目錄瀏覽、文件的讀取、文件的寫入等操作。通過plus.io可獲取文件系統(tǒng)管理對象。Storage模塊管理應(yīng)用本地數(shù)據(jù)存儲區(qū)，用于應(yīng)用數(shù)據(jù)的保存和讀取。應(yīng)用本地數(shù)據(jù)與localStorage、sessionStorage的區(qū)別在于數(shù)據(jù)有效域不同，前者可在應(yīng)用內(nèi)跨域操作，數(shù)據(jù)存儲期是持久化的，并且沒有容量限制。通過plus.storage可獲取應(yīng)用本地數(shù)據(jù)管理對象。Uploader模塊管理網(wǎng)絡(luò)上傳任務(wù)，用于從本地上傳各種文件到服務(wù)器，并支持跨域訪問操作。通過plus.uploader可獲取上傳管理對象。Uploader上傳使用HTTP的POST方式提交數(shù)據(jù)，數(shù)據(jù)格式符合Multipart/form-data規(guī)范，即rfc1867（Form-based File Upload in HTML）協(xié)議。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!doctype html>
<html class="feedback">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="misapplication-tap-highlight" content="no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>HTML5 Plus 拍照或者相冊選擇圖片上傳</title>
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" />
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/utitls.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=59PBaEOro16CiH2W4CG81zEN&v=2.0"></script>
<style type="text/css">
.del {
position: absolute;
top:1px;
right: 1px;
display: block;
line-height: 1;
cursor: pointer;
color:#fff;
}
.del:hover {
color:#ff3333;
}
</style>
<style>
.table-view {
position: relative;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
background-color: #f5f5f5;
}
.table-view-cell {
position: relative;
overflow: hidden;
padding: 0px 15px;
-webkit-touch-callout: none;
margin-bottom: 1px;
}
.table-view-cell:after {
position: absolute;
right: 0;
bottom: 0;
left: 0px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.table-view-cell>a:not(.btn) {
position: relative;
display: block;
overflow: hidden;
margin: -0px -15px;
padding: inherit;
white-space: nowrap;
text-overflow: ellipsis;
color: inherit;
background-color: #75b9f4;
height: 40px;
line-height: 40px;
}
.navigate-right:after
{
font-family: Muiicons;
font-size: inherit;
line-height: 1;
position: absolute;
top: 50%;
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-decoration: none;
color: #666;
-webkit-font-smoothing: antialiased;
}
.table-view-cell.collapse .collapse-content {
position: relative;
display: none;
overflow: hidden;
margin: 0px -15px 0px;
padding: 0px 0px !important;
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
background-color: transparent;
}
.image-item{
position: relative;
}
.image-item .info{
position: absolute;
top:0px;
left:4px;
color: #ff9900;
font-size: 12px;
}
</style>
</head>
<body>
<header class="bar bar-nav">
<h2 class="title">拍照或者相冊選擇圖片上傳</h2>
</header>
<p class="content">
<p style="margin-top: 10px;"></p>
<input type="hidden" id="ckjl.id" name="ckjl.id" value="429">
<p class="collapse-content" >
<form>
<label class="row-label"></label>
<p id='F_CKJLBS' class="row image-list">
<p class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></p>
</p>
</form>
</p>
</p>
<script src="../../js/mui.min.js"></script>
<script>
var procinstid = 0;
//初始化頁面執(zhí)行操作
function plusReady() {
//Android返回鍵監(jiān)聽事件
plus.key.addEventListener('backbutton',function(){
myclose();
},false);
}
if (window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
//加載頁面初始化需要加載的圖片信息
//或者相冊IMG_20160704_112620.jpg
//imgId:圖片名稱：1467602809090或者IMG_20160704_112620
//imgkey:字段例如：F_ZDDZZ
//ID：站點(diǎn)編號ID,例如429
//src：src="file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-1467602809090.jpg"
function showImgDetail (imgId,imgkey,id,src) {
var html = "";
html +='<p id="Img'+imgId+imgkey+'" class="image-item ">';
html +=' <img id="picBig" data-preview-src="" data-preview-group="1" '+src+'/>';
html +=' <span class="del" onclick="delImg(\''+imgId+'\',\''+imgkey+'\','+id+');">';
html +=' <p class="fa fa-times-circle"></p>';
html +=' </span>';
html +='</p>';
$("#"+imgkey+"S").append(html);
}
//刪除圖片
//imgId:圖片名稱：IMG_20160704_112614
//imgkey:字段，例如F_ZDDZZ
//ID：站點(diǎn)編號ID，例如429
function delImg(imgId,imgkey,id){
var bts = ["是", "否"];
plus.nativeUI.confirm("是否刪除圖片？", function(e) {
var i = e.index;
if (i == 0) {
var itemname=id+"img-"+imgkey;//429img-F_ZDDZZ
var itemvalue=plus.storage.getItem(itemname);
//{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}
if(itemvalue!=null){
var index=itemvalue.indexOf(imgId+",");
if(index==-1){//沒有找到
delImgfromint(imgId,imgkey,id,index);
}else{
delImgFromLocal(itemname,itemvalue,imgId,imgkey,index); //修改，加了一個index參數(shù)
}
}else{
delImgfromint(imgId,imgkey,id);
}
}
},"查勘", bts);
/*var isdel = confirm("是否刪除圖片？");
if(isdel == false){
return;
}*/
}
function delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){
var wa = plus.nativeUI.showWaiting();
var left=itemvalue.substr(0,index-1);
var right=itemvalue.substring(index,itemvalue.length);
var end=right.indexOf("}");
rightright=right.substring(end+1,right.length);
var newitem=left+right;
plus.storage.setItem(itemname,newitem);
myAlert("刪除成功");
$("#Img"+imgId+imgkey).remove();
wa.close();
}
//選取圖片的來源，拍照和相冊
function showActionSheet(conf){
var pid = conf.id;
var actionbuttons=[{title:"拍照"},{title:"相冊選取"}];
var actionstyle={title:"選擇照片",cancel:"取消",buttons:actionbuttons};
plus.nativeUI.actionSheet(actionstyle, function(e){
if(e.index==1){
getImage(pid);
}else if(e.index==2){
galleryImg(pid);
}
} );
}
//相冊選取圖片
function galleryImg(pid) {
plus.gallery.pick( function(p){
//alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg
plus.io.resolveLocalFileSystemURL(p, function(entry) {
//alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg
//alert(entry.name);//IMG_20160704_112620.jpg
compressImage(entry.toLocalURL(),entry.name,pid);
}, function(e) {
plus.nativeUI.toast("讀取拍照文件錯誤：" + e.message);
});
}, function ( e ) {
}, {
filename: "_doc/camera/",
filter:"image"
} );
}
// 拍照
function getImage(pid) {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
//alert(p);//_doc/camera/1467602809090.jpg
plus.io.resolveLocalFileSystemURL(p, function(entry) {
//alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg
//alert(entry.name);//1467602809090.jpg
compressImage(entry.toLocalURL(),entry.name,pid);
}, function(e) {
plus.nativeUI.toast("讀取拍照文件錯誤：" + e.message);
});
}, function(e) {
}, {
filename: "_doc/camera/",
index: 1
});
}
//壓縮圖片
function compressImage(url,filename,pid){
var name="_doc/upload/"+pid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg
plus.zip.compressImage({
src:url,//src: (String 類型 )壓縮轉(zhuǎn)換原始圖片的路徑
dst:name,//壓縮轉(zhuǎn)換目標(biāo)圖片的路徑
quality:20,//quality: (Number 類型 )壓縮圖片的質(zhì)量.取值范圍為1-100
overwrite:true//overwrite: (Boolean 類型 )覆蓋生成新文件
},
function(event) {
//uploadf(event.target,pid);
var path = name;//壓縮轉(zhuǎn)換目標(biāo)圖片的路徑
//event.target獲取壓縮轉(zhuǎn)換后的圖片url路
//filename圖片名稱
saveimage(event.target,pid,filename,path);
},function(error) {
plus.nativeUI.toast("壓縮圖片失敗，請稍候再試");
});
}
//保存信息到本地
/**
*
* @param {Object} url 圖片的地址
* @param {Object} pid 字段的名稱
* @param {Object} name 圖片的名稱
*/
function saveimage(url,pid,name,path){
//alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg
//alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpg
var state=0;
var wt = plus.nativeUI.showWaiting();
// plus.storage.clear();
namename=name.substring(0,name.indexOf("."));//圖片名稱：1467602809090
var id = document.getElementById("ckjl.id").value;
var itemname=id+"img-"+pid;//429img-F_ZDDZ
var itemvalue=plus.storage.getItem(itemname);
if(itemvalue==null){
itemvalue="{"+name+","+path+","+url+"}";//{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}
}else{
itemvalueitemvalue=itemvalue+"{"+name+","+path+","+url+"}";
}
plus.storage.setItem(itemname, itemvalue);
var src = 'src="'+url+'"';
//alert("itemvalue="+itemvalue);
showImgDetail(name,pid,id,src);
wt.close();
}
//上傳圖片，實(shí)例中沒有添加上傳按鈕
function uploadimge(agree,back) {
//plus.storage.clear();
var wa = plus.nativeUI.showWaiting();
var DkeyNames=[];
var id = document.getElementById("ckjl.id").value;
var length=id.toString().length;
var ididnmae=id.toString();
var numKeys=plus.storage.getLength();
var task = plus.uploader.createUpload(getUrl() + 'url', {
method: "POST"
},
function(t, status) {
if (status == 200) {
console.log("上傳成功");
$.ajax({
type: "post",
url: getUrl() + 'url',
data: {
taskId: taskId,
voteAgree: agree,
back: back,
voteContent: $("#assign").val(),
},
async: true,
dataType: "text",
success: function(data) {
wa.close();
goList(data);
},
error: function() {
wa.close();
myAlert("網(wǎng)絡(luò)錯誤，提交審批失敗，請稍候再試");
}
});
} else {
wa.close();
console.log("上傳失敗");
}
}
);
task.addData("id",id);
for(var i=0; i<imgArray.length;i++){
var itemkey=id+"img-"+imgArray[i];
if(plus.storage.getItem(itemkey)!=null){
var itemvalue=plus.storage.getItem(itemkey).split("{");
for(var img=1;img<itemvalue.length;img++){
var imgname=itemvalue[img].substr(0,itemvalue[img].indexOf(","));
var imgurl=itemvalue[img].substring(itemvalue[img].indexOf(",")+1,itemvalue[img].lastIndexOf(","));
task.addFile(imgurl,{key:imgurl});
}
}
}
task.start();
}
</script>
</body>
</html>效果圖：
以上是“HTML5 Plus怎么實(shí)現(xiàn)手機(jī)APP拍照或相冊選擇圖片上傳功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前名稱：HTML5Plus怎么實(shí)現(xiàn)手機(jī)APP拍照或相冊選擇圖片上傳功能
標(biāo)題URL：http://muchs.cn/article10/ghgido.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站策劃、搜索引擎優(yōu)化、定制網(wǎng)站、自適應(yīng)網(wǎng)站、軟件開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 學(xué)會SEO優(yōu)化去提升搜索引擎優(yōu)化 2016-10-26
- 德州SEO運(yùn)用鏈接標(biāo)題顛覆搜索引擎優(yōu)化結(jié)果 2023-01-23
- 東莞定制建站：網(wǎng)站定制將更符合搜索引擎優(yōu)化！ 2021-11-11
- 搜索引擎優(yōu)化有什么基本原則？ 2016-01-30
- 成都網(wǎng)站優(yōu)化分享對搜索引擎優(yōu)化排名概念的再思考 2016-10-31
- 服裝網(wǎng)站的搜索引擎優(yōu)化方案 2022-07-18
- 網(wǎng)站建設(shè)要有利于搜索引擎優(yōu)化 2023-02-04
- 應(yīng)遵循搜索引擎優(yōu)化規(guī)則 2016-10-26
- 搜索引擎優(yōu)化之什么是刷指數(shù) 2023-04-13
- 網(wǎng)站的搜索引擎優(yōu)化策略 2016-11-16
- 搜索引擎優(yōu)化中網(wǎng)站加錨文本有哪些作用？ 2014-04-23
- 站內(nèi)利于搜索引擎優(yōu)化的四大布局技巧 2022-08-08