会python真的可以为所欲为0(回)
351天前
这里还有人吗1(回)
536天前这里还有人吗0(回)
536天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
761天前到处都是羊，不想上班0(回)
841天前
鸽子
0(回)
845天前<!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"> |
<h1 class="title">拍照或者相册选择图片上传</h1> |
</header> |
<div class="content"> |
<div style="margin-top: 10px;"></div> |
<input type="hidden" id="ckjl.id" name="ckjl.id" value="429"> |
<div class="collapse-content" > |
<form> |
<label class="row-label"></label> |
<div id='F_CKJLBS' class="row image-list"> |
<div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div> |
</div> |
</form> |
</div> |
</div> |
<script src="../../js/mui.min.js"></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 +=' <div class="fa fa-times-circle"></div>'; |
html +=' </span>'; |
html +='</div>'; |
$("#"+imgkey+"S").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("}"); |
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 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(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,divid); |
}, function(e) { |
plus.nativeUI.toast("读取拍照文件错误：" + e.message); |
}); |
}, function ( e ) { |
}, { |
filename: "_doc/camera/", |
filter:"image" |
} ); |
} |
// 拍照 |
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(); |
namename=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{ |
itemvalueitemvalue=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 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("网络错误，提交审批失败，请稍候再试"); |
} |
}); |
|
|
} 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> |
