WebUploader 設置原圖上傳,不啓用壓縮
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 οnclick='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 οnclick='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});
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.