hbuilder調底層運用，多張圖片上傳

時間 2019-11-12

標籤 hbuilder 底層運用圖片上傳简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>發佈</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/feedback-page.css" />
<script type="text/javascript" src="js/common.js"></script>

<style type="text/css">
#ss{

}
</style>
</head>
<body>
<header>
<a href="javascript:history.go(-1)" class="fl fanhui">
<img src="Img/back-a.png" alt="返回" />
</a>
<a href="qidong.html" class="fr fanhui">
<i class="iconfont icon-flight"></i>
</a>
</header>
<div class="container-two" id='F_CKJLBS'>
<form action="" method="post">
<textarea placeholder="請描述您的項目，您的資源，以及須要什麼樣的合夥人"></textarea>
<input type="hidden" id="ckjl.id" name="ckjl.id" value="429">
<div class="clear"></div>
<div id="ss">
</div>
<div class="clear"></div>
<div class="Share-from">
<a href="#" ><img src="Img/camera.png"/></a>
<a href="#" onclick="showActionSheet(this);"><img src="Img/img.png"/></a>
<a href="#"><img src="Img/crm.png"/></a>
</div>
</form>
</div>
<div class="ColdFusion" id="ColdFusion">
<p>
<span class="fl"><img src="Img/label.png" alt="標籤" /></span>
<span class="ColdFusion-left fl">專屬標籤</span>
<span class="ColdFusion-right fr">請選擇專屬標籤</span>
</p>
</div>

<div class="mask">
</div>
<div class="Popup" id="Popup">
<textarea placeholder="選擇專屬標籤" class="select" id="select" v-html="str"></textarea>
<div class="label-list" >
<ul id="label">
<li v-for="item in items" @click="test($event)">{{item.message}}</li>
</ul>
</div>
<a href="#" class="sure">肯定</a>
</div>
<script src="js/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(".ColdFusion-right").click(function(){
$(".mask").css("display","block");
$(".Popup").css("display","block");
})
$(".sure").click(function(){
$(".mask").css("display","none");
$(".Popup").css("display","none");
var msg=$(".ColdFusion-right").innerHTML;
alert(msg)
})
</script>
<script type="text/javascript">
var vm = new Vue({
el: '#Popup',
data: {
str:'',
items: [
{ message: '自駕遊' },
{ message: '自駕遊' },
{ message: '自駕遊' },
{ message: '自駕遊' },
{ message: '自駕遊' },
{ message: '自駕遊' },
{ message: '自駕遊' },
{ message: '自駕遊' },
]
},
methods:{
test:function(e) {
this.str += e.target.innerHTML+'&nbsp&nbsp';
}
}
})
var test=null;
</script>

<script>
var procinstid = 0;
//初始化頁面執行操做
function plusReady() {
//Android返回鍵監聽事件
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：站點編號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 +='<div 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 +=' <i class="iconfont icon-cha"></i>';
html +=' </span>';
html +='</div>';

$("#ss").append(html);
}

//刪除圖片
//imgId:圖片名稱：IMG_20160704_112614
//imgkey:字段，例如F_ZDDZZ
//ID：站點編號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參數
}

}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("}");
right=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 divid = conf.id;
var actionbuttons=[{title:"拍照"},{title:"相冊選取"}];
var actionstyle={title:"選擇照片",cancel:"取消",buttons:actionbuttons};
plus.nativeUI.actionSheet(actionstyle, function(e){
if(e.index==1){
getImage(divid);
}else if(e.index==2){
galleryImg(divid);
}
} );
}
function galleryImg(divid){
plus.gallery.pick( function(e){
//alert(e.files.length);
var zm=0;
setTimeout(file,200);
function file(){
plus.io.resolveLocalFileSystemURL(e.files[zm], function(entry) {
compressImage(entry.toLocalURL(),entry.name,divid);
}, function(e) {
plus.nativeUI.toast("讀取拍照文件錯誤：" + e.message);
});
zm++;
if(zm<e.files.length){
setTimeout(file,200);
}
}

}, function ( e ) {
console.log( "取消選擇圖片" );
},{filename: "_doc/camera/",
filter:"image",
multiple:true,
system:false
});
}

// 拍照
function getImage(divid) {
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,divid);
}, function(e) {
plus.nativeUI.toast("讀取拍照文件錯誤：" + e.message);
});
}, function(e) {
}, {
filename: "_doc/camera/",
index: 1
});
}
//壓縮圖片
function compressImage(url,filename,divid){
var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg
plus.zip.compressImage({
src:url,//src: (String 類型 )壓縮轉換原始圖片的路徑
dst:name,//壓縮轉換目標圖片的路徑
quality:20,//quality: (Number 類型 )壓縮圖片的質量.取值範圍爲1-100
overwrite:true//overwrite: (Boolean 類型 )覆蓋生成新文件
},
function(event) {
//uploadf(event.target,divid);
var path = name;//壓縮轉換目標圖片的路徑
//event.target獲取壓縮轉換後的圖片url路
//filename圖片名稱
saveimage(event.target,divid,filename,path);
},function(error) {
plus.nativeUI.toast("壓縮圖片失敗，請稍候再試");
});
}
//保存信息到本地
/**
*
* @param {Object} url 圖片的地址
* @param {Object} divid 字段的名稱
* @param {Object} name 圖片的名稱
*/
function saveimage(url,divid,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();
name=name.substring(0,name.indexOf("."));//圖片名稱：1467602809090
var id = document.getElementById("ckjl.id").value;
var itemname=id+"img-"+divid;//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{
itemvalue=itemvalue+"{"+name+","+path+","+url+"}";
}
plus.storage.setItem(itemname, itemvalue);

var src = 'src="'+url+'"';
//alert("itemvalue="+itemvalue);
showImgDetail(name,divid,id,src);
wt.close();

}
//上傳圖片，實例中沒有添加上傳按鈕
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 idnmae=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("網絡錯誤，提交審批失敗，請稍候再試");
}
});

} 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>javascript