MUI+H5手机上传照片 支持多图片上传和拍照上传
拍照
Js代碼:
var fileArr = [];
mui.init({
swipeBack: true //啟用右滑關閉功能
});
document.getElementById(‘headImage’).addEventListener(‘tap’, function() {
if(mui.os.plus) {
var buttonTit = [{
title: “拍照”
}, {
title: “從手機相冊選擇”
}];
plus.nativeUI.actionSheet({
title: “上傳圖片”,
cancel: “取消”,
buttons: buttonTit
}, function(b) { /actionSheet 按鈕點擊事件/
switch(b.index) {
case 0:
break;
case 1:
getImage(); /拍照/
break;
case 2:
galleryImg(); /打開相冊/
break;
default:
break;
}
})
}
}, false);
// 拍照獲取圖片
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var imgSrc = entry.toLocalURL() + “?version=” + new Date().getTime(); //拿到圖片路徑
setFile(imgSrc);
setHtml(imgSrc);
}, function(e) {
console.log(“讀取拍照文件錯誤:” + e.message);
});
}, function(s) {
console.log(“error” + s.message);
}, {
filename: “_doc/camera/”
})
}
// 從相冊中選擇圖片
function galleryImg() {
// 從相冊中選擇圖片
plus.gallery.pick(function(e) {
for(var i in e.files) {
var fileSrc = e.files[i];
setFile(fileSrc);
setHtml(fileSrc);
}
}, function(e) {
console.log(“取消選擇圖片”);
}, {
filter: “image”,
multiple: true,
//maximum: 5,
system: false,
onmaxed: function() {
plus.nativeUI.alert(‘最多只能選擇5張圖片’);
}
});
}
jQuery("#imgs").append(str);
}
function setFile(fileSrc){
var image = new Image();
image.src = fileSrc;
fileArr.push(image);
}
document.getElementById(‘uploadImage’).addEventListener(‘tap’,function(){
var files = fileArr;
var wt=plus.nativeUI.showWaiting();
var task=plus.uploader.createUpload(‘http://192.168.1.111:8181/sys-privilege/Upload’,
{method:“POST”},
function(t,status){ //上傳完成
if(status==200){
alert(“上傳成功:”+t.responseText);
wt.close(); //關閉等待提示按鈕
}else{
alert(“上傳失敗:”+status);
wt.close();//關閉等待提示按鈕
}
}
);
//將文件集合添加到上傳隊列中
for(var i=0;i<files.length;i++){
var f=files[i];
task.addFile(f.src,{key:i});
}
//傳其他的參數 如備注
//添加其他參數
//遍歷5個input框
});
總結
以上是生活随笔為你收集整理的MUI+H5手机上传照片 支持多图片上传和拍照上传的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 基于Netty+Zookeeper实现D
- 下一篇: react 清除缓存命令