webUploader外掛實現檔案上傳
var uploader = WebUploader.create({
// 選擇檔案是否自動上傳
auto: true,
// swf檔案路徑
swf: ‘PUBLIC/static/js/Uploader.swf’,
// 檔案接收服務端。
server: ‘url’,
prepareNextFile: true,
duplicate: true, // 去重,
fileNumLimit: num, // 限制檔案上傳數
// 選擇檔案的按鈕。可選。
// 內部根據當前執行是建立,可能是input元素,也可能是flash.
pick: {
id: ‘#’ + btu_id,
multiple: true
},
accept: {
title: ‘Images’,
extensions: ‘jpg,jpeg,png,docx,doc,txt’,
mimeTypes: ‘image/jpg,image/jpeg,image/png,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword,text/plain’
},
method: ‘POST’
});
// 選擇檔案後觸發
uploader.on(‘fileQueued’, function(file) {
$list.append( ‘
‘
’ + file.name + ‘移除
’ +‘
等待上傳…
’ +‘’);
});
// 檔案上傳過程中建立進度條實時顯示。
uploader.on( ‘uploadProgress’, function( file, percentage ) {
var
// 避免重複建立
if ( !percent.length ) {
‘’ +
‘’ +
‘’).appendTo( li ).find(‘.progress-bar’);
}li.find(‘p.state’).text(‘上傳中…’);
percent.css( ‘width’, percentage * 100 + ‘%’ );
});
// 上傳成功後觸發
// url = ”;
uploader.on( ‘uploadSuccess’, function( file, res ) {
upload_time = CurentTime(); // 呼叫日期函式,得到檔案上傳的時間,到秒
var
// console.log(res._raw);//這裡可以得到上傳後的檔案路徑
var file_url = res._raw;
var file_url_arr = file_url.split(‘\’); // 分割成陣列、
var file_name = file_url_arr[file_url_arr.length - 1]; // 獲取檔名
$li.find('p.state').text('上傳成功');
// var new_url = file_url.replace(file_name, upload_time + '_' + file_name); //得到新的檔案路徑,為了檔名不重複使用時間
url = file_url + ',' + $('#' + btu_id + '_name').val(); // 得到檔案儲存的路徑,多檔案以','分割
$('#' + btu_id + '_name').val(url); // 給表單隱藏域賦值
$( '#'+file.id ).addClass('upload-state-done');
$('#'+ file.id).find('span').attr('id', file.id +'_remove');
$('#'+ file.id).find('span').attr('data', upload_time +'_' + file.name);
// 檔案移除
$('#'+file.id +'_remove').on('click',function(){
var remove_url = $(this).attr('data'); // 時間+原檔名的新檔名
$.ajax({
type: "post",
url: "{:url('archives/removeRegFile')}",
data: 'file_url=' + remove_url,
dataType: "json",
success: function(data){
var arr = new Array();
arr = url.split(',');
if (data.id == true) {
removeByValue(arr, data.url); // 移除arr陣列中值為data.url
var str = arr.join(','); // 陣列轉字串
$('#' +btu_id +'_name').val(str); //重新給隱藏域賦值
$li.remove() // 移除節點
return url = $('#' +btu_id +'_name').val();
} else if (data.id == false) {
$li.find('p.state').text('移除失敗');
arr.join(','); // 陣列轉字串
$('#' +btu_id +'_name').val(arr); //重新給隱藏域賦值
return url =$('#' +btu_id +'_name').val();
} else if (data.id == 'no_url') {
removeByValue(arr, data.url)
arr = ''
$('#' +btu_id +'_name').val(arr)
$li.remove() // 移除節點
return url = $('#' +btu_id +'_name').val();
}
}
});
})
});
// 檔案上傳失敗,顯示上傳出錯。
uploader.on( ‘uploadError’, function( file ) {
var
// 避免重複建立
if ( !error.length ) {error = $(‘
}error.text(‘上傳失敗’);
});
// 完成上傳完了,成功或者失敗,先刪除進度條。
uploader.on( ‘uploadComplete’, function( file ) {
$( ‘#’+file.id ).find(‘.progress’).remove();
});
uploader.on(‘error’, function(type) {
if (type == “Q_TYPE_DENIED”) {
(‘#’ + btu_id + ‘_num’).text(‘請上傳JPG、JPEG、PNG格式檔案’)
} else if(type == “F_EXCEED_SIZE”) {(‘#’ + btu_id + ‘_num’).text(‘檔案大小不能超過8M’)
} else if(type == “Q_EXCEED_NUM_LIMIT”) {
alert(‘最多上傳5個檔案’);
}
})