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个文件’);
}
})