手機壓縮 上傳照片/刪除照片
阿新 • • 發佈:2018-12-04
// 生成識別碼
var dates = new Date();
var tIdentifier = dates.getTime();
var identifier = String(tIdentifier) + parseInt(Math.random() * 10000000);
console.log("識別碼" + identifier);
var headKey = identifier + "1";
var urls = URL + '/customer/api/mobile/uploadFile' ; //上傳介面
var urldel = URL + '/customer/api/mobile/deleteImage'; //刪除介面
//上傳圖片
var apply_pic = function() {
//拍照
function captureImage(id, url, headKey, otherKey, otherVal, imagePath) {
var cmr = plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0 ];
var fmt = cmr.supportedImageFormats[0];
cmr.captureImage(function(path) {
plus.io.resolveLocalFileSystemURL(path, function(p) {
var localUrl = p.toLocalURL();
console.log(localUrl);
var has = h(id).find("img").length;
var wt = plus.nativeUI.showWaiting();
plus.zip.compressImage({//壓縮
src: localUrl,
dst: "_doc/" + localUrl,
overwrite: true,
},
function(imgUrl) {
console.log(imgUrl)
var task = plus.uploader.createUpload(url, {
method: "POST",
async: false
},
function(t, status) { //上傳完成
console.log(status);
console.log('t=' + JSON.stringify(t));
console.log('t.responseText', t.responseText);
if(status == 200) {
mui.toast("上傳成功")
var back = (t.responseText.split('Results(')[1]);
back = back.substring(0, back.length - 1);
console.log('back(拍照)--->'+back);
back = JSON.parse(back);
var html = "";
html += '<li data-fileId="' + back.data.reason +
'" class="image-item imagelistjs pictureList mui-pull-left">';
html += ' <img id="picBig" data-preview-src="" data-preview-group="1" src=' + imgUrl.target + '/>';
html += ' <span class="del mui-icon mui-icon-closeempty mui-btn-danger" onclick="deleteImg(this)">';
html += ' </span>';
html += '</li>';
$("#F_CKJLB").before(html);
} else {
mui.toast("上傳失敗")
}
wt.close();
});
task.addData(otherKey, otherVal);
task.addFile(imgUrl.target, {
key: headKey
});
task.start();
},
function(e) {
wt.close();
mui.toast(JSON.stringify(e));
});
});
}, function(error) {
mui.toast("Capture image failed: " + error.message);
}, {
resolution: res,
format: fmt
});
}
//點選上傳圖片
function addPic(id, url, headKey, otherKey, otherVal, imagePath) {
h(id).tap(function() {
var actionbuttons = [{
title: "拍照",
color: "#1296db"
}, {
title: "從相簿選擇",
color: "#1296db"
}];
var actionstyle = {
cancel: "取消",
buttons: actionbuttons
};
plus.nativeUI.actionSheet(actionstyle, function(e) {
var index = e.index;
switch(index) {
case 1: //拍照
captureImage(id, url, headKey, otherKey, otherVal, imagePath);
break;
case 2: //相簿
plus.gallery.pick(
function(path) {
var wt = plus.nativeUI.showWaiting();
var has = h(id).find("img").length;
plus.zip.compressImage({//壓縮
src: path,
dst: "_doc/" + path,
overwrite: true,
},
function(imgUrl) {
//上傳頭像到伺服器
var task = plus.uploader.createUpload(url, {
method: "POST",
async: false
},
function(t, status) { //上傳完成
console.log('status=' + status);
console.log('t=' + JSON.stringify(t));
console.log('t.responseText=' + t.responseText);
if(status == 200) {
mui.toast("上傳成功")
var back = t.responseText.split('Results(')[1];
console.log('back(相簿)--->' + back);
back = back.substring(0, back.length - 1);
back = JSON.parse(back);
var html = "";
html += '<li data-fileId="' + back.data.reason +
'" class="image-item imagelistjs pictureList mui-pull-left">';
html += ' <img class="picBigjs" data-preview-src="" data-preview-group="1" src=' + imgUrl.target + '/>';
html += ' <span class="del mui-icon mui-icon-closeempty mui-btn-danger" onclick="deleteImg(this)">';
html += ' </span>';
html += '</li>';
$("#F_CKJLB").before(html); //頁面展示已上傳的圖片
} else {
mui.toast("上傳失敗");
}
wt.close();
});
task.addData(otherKey, otherVal);
task.addFile(imgUrl.target, {
key: headKey
});
task.start();
},
function(e) {
mui.toast(JSON.stringify(e))
});
},
function(e) {}, {
filter: "image",
system: false
});
}
})
});
}
return {
captureImage: captureImage,
addPic: addPic,
init: function() {
addPic('#F_CKJLB', urls, headKey, "randomId", identifier, "");
}
}
}();
apply_pic.init();
function deleteImg(obj) {
var fileId = $(obj).parents('li.imagelistjs').attr('data-fileId');
console.log('fileId=' + fileId);
$.ajax({
url: urldel,
data: {
"fileId": fileId
},
dataType: 'jsonp', //伺服器返回json格式資料
type: 'get', //HTTP請求型別
timeout: 10000, //超時時間設定為10秒;
jsonpCallback: "Results",
success: function(back) {
console.log('刪除圖片' + JSON.stringify(back));
if(back.code == '0') {
mui.toast("刪除成功!");
$(obj).parents('li.imagelistjs').remove();
} else {
mui.toast("刪除失敗!")
}
},
error: function(xhr, type, errorThrown) {
//異常處理;
mui.toast("系統連線錯誤")
console.log(xhr);
console.log(type);
console.log(errorThrown);
}
});
}
效果圖: