引入文件
css:mui.min.css、app.css、iconfont.css、feedback-page.css、font-awesome.min.css
js:jquery.js、common.js、utitls.js
相关文件见:https://pan.baidu.com/s/1ITkQuUzXn05DeDuV1cLB9w 密码:l1fx
css:
<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>
HTML:
<div class="panel feedback">
<div class="content">
<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>
</div>
JS:
//选取图片的来源,拍照和相册
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) {
plus.io.resolveLocalFileSystemURL(event.target,function(entry){
entry.file( function(file){
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(e) {
var picUrl = e.target.result.toString();
// $("#img").attr("src",picUrl)
var arr = picUrl.split(',');
var type = arr[0].match(/:(.*?);/)[1];//获得图片的类型
//---把base64转化为二进制----
var text = window.atob(picUrl.split(",")[1]);
var buffer = new Uint8Array(text.length);
var pecent = 0, loop = null;
for (var i = 0; i < text.length; i++) {
buffer[i] = text.charCodeAt(i);
}
var blob = getBlob([buffer], type);
uploadImg(blob);
// console.log(blob.size/1024+"kb");
// fd = new FormData();//上边是FormData的介绍
// fd.append('photoupload',blob);
// console.log(fd)
//fd里存有图片的二进制
}
});
});
return;
//uploadf(event.target,divid);
var path = name;//压缩转换目标图片的路径
//event.target获取压缩转换后的图片url路
//filename图片名称
saveimage(event.target,divid,filename,path);
console.log(event.target)
console.log(divid)
console.log(filename)
console.log(path)
},function(error) {
plus.nativeUI.toast("压缩图片失败,请稍候再试");
});
}
function uploadImg(blob){
var Bh = $("#bianhao").val();
if(!Bh){
alert("编号不能为空!")
return;
}
// alert(Bh)
// return;
var formdata = new FormData();
formdata.delete("Bh");
formdata.append("Bh", Bh);
formdata.append("file", blob, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
formdata.delete("fileSize");
formdata.append("fileSize", blob.size);
plus.nativeUI.showWaiting("正在上传照片..");
$.ajax({
url: upLoadImgUrl,
type: 'POST',
data: formdata,
async: true,
cache: false,
contentType: false,
processData: false,
datatype: "jsonp",
success: function (result) {
plus.nativeUI.closeWaiting();
// alert(result.fileName)
alert('图片上传成功');
showPicture(result,Bh);
},
error: function (result, status) {
plus.nativeUI.closeWaiting();
alert('图片上传失败');
return;
}
});
}
function showPicture(result,Bh){
var src = imgPath + "/UploadFile/Attachment/" + Bh + "/" + result.fileName
var html = "";
html +='<div class="image-item ">';
html +=' <img data-preview-src="" id="picBig" src="'+src+'"/>';
html +=' <div style="width:100%;position:absolute;bottom:0px;background:#eeeeee;text-align:center"><span style="color:red;font-size:12px">上传成功</span></div>';
html +='</div>';
$("#F_CKJLBS").append(html);
}
转自:https://blog.csdn.net/qq_27626333/article/details/51896616