WebUploader 設定原圖上傳，不啟用壓縮
阿新 • • 發佈：2019-02-09
var uploader = WebUploader.create({
// 選完檔案後，是否自動上傳。
auto: true,
// swf檔案路徑
swf: 'lib/webuploader/0.1.5/Uploader.swf',
// 檔案接收服務端。
server: 'goods/getGoodsDescriptionPhoto',
// 選擇檔案的按鈕。可選。
// 內部根據當前執行是建立，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允許選擇圖片檔案。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
compress: false,//不啟用壓縮
resize: false,//尺寸不改變
duplicate: true //可重複上傳
});
//當有檔案新增進來的時候
uploader.on( 'fileQueued', function( file ) { // webuploader事件.當選擇檔案後，檔案被載入到檔案佇列中，觸發該事件。等效於 uploader.onFileueued = function(file){...} ，類似js的事件定義。
});
// 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。
uploader.on( 'uploadSuccess', function( file ,response) {
var $list = $("#fileList");
var $li = $(
"<div id='des"+imgDes+"' style='float: left;'><div style='width: 108px;height: 108px;border: 1px solid rgb(219,219,219);text-align:center;'>"
+"<img style='margin-top:4px'>"
+"<div onclick='deleteDescriptionSession(\""+response.data.src+"\",\""+imgDes+"\")' style='text-align:center;cursor:pointer;background-color: black;width: 108px;height: 20px;filter:alpha(opacity:30);opacity:0.6;position: relative;top:-16px'>"
+"<span style='color: red;filter:alpha(opacity:30);opacity:1;'>刪 除</span>"
+"</div>"
+"</div></div>"
),
$img = $li.find('img');
imgDes++;
// $list為容器jQuery例項
$list.append( $li );
// 建立縮圖
// 如果為非圖片檔案，可以不用呼叫此方法。
// thumbnailWidth x thumbnailHeight 為 100 x 100
uploader.makeThumb( file, function( error, src ) { //webuploader方法
if ( error ) {
$img.replaceWith('<span>不能預覽</span>');
return;
}
$img.attr( 'src', src );
}, 100, 100 );
$( '#'+file.id ).addClass('upload-state-done');
});
// 檔案上傳失敗，顯示上傳出錯。
uploader.on( 'uploadError', function( file,response ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
$error.text('上傳失敗');
parent.layer.msg(response.msg, {icon : 5,time : 1500});
});
// 選完檔案後，是否自動上傳。
auto: true,
// swf檔案路徑
swf: 'lib/webuploader/0.1.5/Uploader.swf',
// 檔案接收服務端。
server: 'goods/getGoodsDescriptionPhoto',
// 選擇檔案的按鈕。可選。
// 內部根據當前執行是建立，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允許選擇圖片檔案。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
compress: false,//不啟用壓縮
resize: false,//尺寸不改變
duplicate: true //可重複上傳
});
//當有檔案新增進來的時候
uploader.on( 'fileQueued', function( file ) { // webuploader事件.當選擇檔案後，檔案被載入到檔案佇列中，觸發該事件。等效於 uploader.onFileueued = function(file){...} ，類似js的事件定義。
});
// 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。
uploader.on( 'uploadSuccess', function( file ,response) {
var $list = $("#fileList");
var $li = $(
"<div id='des"+imgDes+"' style='float: left;'><div style='width: 108px;height: 108px;border: 1px solid rgb(219,219,219);text-align:center;'>"
+"<img style='margin-top:4px'>"
+"<div onclick='deleteDescriptionSession(\""+response.data.src+"\",\""+imgDes+"\")' style='text-align:center;cursor:pointer;background-color: black;width: 108px;height: 20px;filter:alpha(opacity:30);opacity:0.6;position: relative;top:-16px'>"
+"<span style='color: red;filter:alpha(opacity:30);opacity:1;'>刪 除</span>"
+"</div>"
+"</div></div>"
),
$img = $li.find('img');
imgDes++;
// $list為容器jQuery例項
$list.append( $li );
// 建立縮圖
// 如果為非圖片檔案，可以不用呼叫此方法。
// thumbnailWidth x thumbnailHeight 為 100 x 100
uploader.makeThumb( file, function( error, src ) { //webuploader方法
if ( error ) {
$img.replaceWith('<span>不能預覽</span>');
return;
}
$img.attr( 'src', src );
}, 100, 100 );
$( '#'+file.id ).addClass('upload-state-done');
});
// 檔案上傳失敗，顯示上傳出錯。
uploader.on( 'uploadError', function( file,response ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
$error.text('上傳失敗');
parent.layer.msg(response.msg, {icon : 5,time : 1500});
});