MUI 上传图片案例
HTML代码
<div id="credential-photo" class="mui-input-row" style="height: 60px;padding-top: 8px; display: none;"> <label><i>* </i>证书照片</label> <div> <div id="userfile" style="display: inline-block;"> </div> <a id="addfile" href="#picture"><img src="img/toggle-expand.png"/></a> </div> </div> <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a id="getImage" href="#">拍照</a> </li> <li class="mui-table-view-cell"> <a id="getAlbum" href="#">相册</a> </li> </ul> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a href="#picture"><b>取消</b></a> </li> </ul> </div>
然后是简单的CSS
#userfile>.img-item{
position: relative;
margin: 0;
padding: 0;
display: inline-block;
}
#userfile>.img-item>.img-close{
position: absolute;
right: 0px;
background-color: red;
display: inline-block;
width: 14px;
height: 14px;
border-radius: 7px;
color: #FFFFFF;
text-align: center;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
js代码
//------------------------------- 拍照 ----------------------------------------------
document.getElementById('getImage').addEventListener('tap',getImage);
document.getElementById('getAlbum').addEventListener('tap',getAlbum);
function getAlbum(){
plus.gallery.pick(function(path){
console.log(path)
compress(path);
}, function(e){
outSet('取消选择图片');
}, {filter:'image'});
}
function getImage(){
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p){
//console.log('成功：'+p);
plus.io.resolveLocalFileSystemURL(p, function(entry){
// createItem(entry);
var path = entry.toLocalURL();
compress(path);
}, function(e){
//alert('读取拍照文件错误：'+e.message);
mui.toast('读取拍照文件错误：'+e.message,{ duration:'long', type:'div' });
});
}, function(e){
// alert('失败：'+e.message);
}, {filename:'_doc/camera/',index:1});
}
var size = null;
var index=1;
function compress(path){
var name = path.substr(path.lastIndexOf('/') + 1);
plus.zip.compressImage({
src: path,
dst: '_doc/' + name,
overwrite: true,
quality: 50
}, function(zip) {
size += zip.size
//console.log("filesize:"+zip.size+",totalsize:"+size);
if (size > (10*1024*1024)) {
return mui.toast('文件超大');
}
//console.log(JSON.stringify(zip));
var imgparent = document.createElement('div');
var closeimg = document.createElement('div');
closeimg.setAttribute('class','img-close mui-icon mui-icon-closeempty');
var id = 'credentialimg-'+index;
closeimg.id=id;
imgparent.setAttribute('class','img-item');
var img = document.createElement('img');
img.src= zip.target;
img.width = 40;
img.height = 40;
img.style.margin = '5px';
img.style.marginBottom = '0';
// img.setAttribute('onclick', 'displayFile(this.src)');
var div = document.getElementById('userfile');
imgparent.appendChild(img);
imgparent.appendChild(closeimg);
div.appendChild(imgparent);
upload(zip.target,id);
index++;
}, function(zipe) {
mui.toast('压缩失败！')
});
}
function upload(path,id){
var url="url";
if(path==''){
plus.nativeUI.alert("没有添加上传文件！");
return;
}
var wt=plus.nativeUI.showWaiting();
var flag = false;
var mask = mui.createMask(function(){
return flag;
});
mask.show();//显示遮罩
var task=plus.uploader.createUpload(url,
{method:"POST"},
function(t,status){ //上传完成
if(status==200){
wt.close();
flag = true;
mask.close();
// alert("上传成功："+t.responseText);
//mui.toast('上传成功',{ duration:'long', type:'div' });
var name = JSON.parse(t.responseText).uqfileid;
files[id] = name;
//console.log('name'+name);
jQuery('#'+id).attr('name',name);
//console.log(jQuery('#'+id).attr('name'));
//console.log(JSON.stringify(files));
}else{
//alert("上传失败："+status);
mui.toast("上传失败："+status,{ duration:'long', type:'div' });
}
}
);
task.addData("client","file");
task.addData("uid",getUid());
task.addFile(path,{key:'uploadkey'});
task.start();
}
function getUid(){
return Math.floor(Math.random()*100000000+10000000).toString();
}
// 预览图删除功能
jQuery('#userfile').on('click','.img-close',function (e) {
var id=e.target.id;
var name = jQuery('#'+id).attr('name');
var parent = $('#'+id).parent();
//console.log('closename'+name);
parent.remove();
if(name!=''){
delete files[id];
//console.log(JSON.stringify(files));
}
});
jQuery('#userfile').on('click','img',function (e) {
var src=e.target.src;
var name=e.target.name;
//console.log('src'+src)
//console.log('name'+name)
var data='';
if(src!=undefined && name!=''){
data=name
}else if(src!=undefined && name==''){
data=src
}
//console.log(src)
displayFile(data);
});
var w=null;
function displayFile(src){
if(w){
//alert('重复点击！');
mui.toast('重复点击',{ duration:'long', type:'div' });
return;
}
if(!src){
//alert('无效的媒体文件');
mui.toast('无效的媒体文件',{ duration:'long', type:'div' });
return;
}
var name = src;
//console.log(name);
var suffix = name.substr(name.lastIndexOf('.'));
var url = '';
if(suffix=='.mov' || suffix=='.3gp' || suffix=='.mp4' || suffix=='.avi'){
//if(unv){plus.runtime.openFile('_doc/camera/'+name);return;}
url = '/plus/camera_video.html';
} else {
url = '/plus/camera_image.html';
}
w=plus.webview.create(url,url,{hardwareAccelerated:true,scrollIndicator:'none',scalable:true,bounce:'all'});
w.addEventListener('loaded', function(){
w.evalJS('loadMedia("'+src+'")');
//w.evalJS('loadMedia("'+'http://localhost:13131/_doc/camera/'+name+'")');
}, false );
w.addEventListener('close', function(){
w = null;
}, false);
w.show('slide-in-right');
}
//------------------------------- 拍照 ----------------------------------------------
