webuploader上傳檔案
阿新 • • 發佈:2019-01-01
$(function(){
$list = $('#fileList');
var uploader = WebUploader.create({
// 存在檔案自動上傳
auto: false,
// swf檔案路徑
swf: './js/Uploader.swf',
// 檔案接收服務端。
server: './upload.php',
// 選擇檔案的按鈕。
pick:{ id: '#videoPicker', label : 'innerHTML' , innerHTML : '上傳檔案' , multiple : false },
// 限制檔案型別
accept : { title: 'video', extensions: 'mp4,avi' , mimeTypes: 'video/*' },
// 是否分片上傳
chunked: true,
// 設定分片大小
chunkSize : 5242880 ,
// 最高併發執行緒 1 , 多了導致後臺拼接順序錯亂視訊檔案播放失敗
threads:1,
// 壓縮檔案
resize: false,
/** 上傳方式 */
method:'post'
})
// 當有檔案被新增進佇列的時候
uploader.on('fileQueued', function ( file )
{
$list.append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '<button type="button" fileId="' + file.id + '" class="btn btn-danger btn-delete"><span class="glyphicon glyphicon-trash">X</span></button></h4>' +
'<div class="state">等待上傳...</div>' +
'</div>');
/** 刪除佇列檔案 */
$(document).on('click','.btn-delete',function()
{
var file_obj = uploader.getFile($(this).attr("fileId"));
uploader.removeFile(file_obj,true);
$(this).parent().parent().fadeOut();
$(this).parent().parent().remove();
})
});
/** 開始上傳 */
$('#UploadBtn').click(function()
{
uploader.upload( $('.btn-delete').attr('fileId') )
})
/** 暫停上傳 */
$('#StopBtn').click(function()
{
var status = $(this).attr('status');
if( status == 'spending' )
{
uploader.stop(true);
$(this).attr('status','goon');
$(this).text('繼續上傳');
} else if( status == 'goon' ) {
uploader.upload();
$(this).attr('status','spending');
$(this).text('暫停上傳');
}
})
/** 上傳過程中進度條 */
uploader.on('uploadProgress', function ( file , percentage )
{
var $li = $('#' + file.id);
$li.find('.state').text(Math.ceil(percentage * 100) + '%');
});
/** 完成上傳 */
uploader.on( 'uploadSuccess', function( file , reponse )
{
});
/** 上傳失敗 */
uploader.on( 'uploadError', function( file )
{
$( '#'+file.id ).find('.state').text('上傳出錯!');
});
/** 上傳完成後執行 */
uploader.on( 'uploadComplete', function( file )
{
$( '#'+file.id ).fadeOut();
})
/** 檔案上傳前處理 */
uploader.on( 'uploadBeforeSend' , function( chunk , data )
{
});
})