1. 程式人生 > >手機壓縮 上傳照片/刪除照片

手機壓縮 上傳照片/刪除照片

//  生成識別碼
        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); } }); }

效果圖:

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述