1. 程式人生 > >webUploader外掛實現檔案上傳

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 li=( ‘#’+file.id );
percent=li.find(‘.progress .progress-bar’);
// 避免重複建立
if ( !percent.length ) {

percent = $(‘

’ +
‘’ +
‘’ +
‘’).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
li = $( ‘#’+file.id );
// 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 li=( ‘#’+file.id ),
error=li.find(‘div.error’);
// 避免重複建立
if ( !error.length ) {error = $(‘

‘).appendTo( li );   
    }
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個檔案’);
}
})