可拖拽和帶預(yù)覽圖的jQuery文件上傳插件ssi-uploader

插件描述：ssi-uploader是一款帶預(yù)覽圖并且可以拖拽文件的jQuery ajax文件上傳插件。該文件上傳插件支持AJAX，支持多文件上傳，可控制上的文件格式和文件大小，提供各種回調(diào)函數(shù)，使用非常方便。

簡(jiǎn)要教程

ssi-uploader是一款帶預(yù)覽圖并且可以拖拽文件的jQuery ajax文件上傳插件。該文件上傳插件支持AJAX，支持多文件上傳，可控制上的文件格式和文件大小，提供各種回調(diào)函數(shù)，使用非常方便。

安裝

可以通過bower或npm來安裝ssi-uploader文件上傳插件。

bower install ssi-uploader
npm install ssi-uploader

使用方法

在頁面中引入ssi-uploader.css和ssi-uploader.js文件。

<link rel="stylesheet" href="path/to/ssi-uploader.css">
<script src="path/to/ssi-uploader.js"></script>

HTML結(jié)構(gòu)

最基本的文件上傳HTML結(jié)構(gòu)是使用一個(gè)<input>元素，類型為file，并指定一個(gè)id。

<input type="file" multiple id="ssi-upload"/>

初始化插件

在頁面DOM元素加載完畢之后，可以通過ssi_uploader方法來初始化該文件上傳插件。

$('#ssi-upload').ssi_uploader({
    url: 'path/to/upload.php'
});

配置參數(shù)

ssi_uploader文件上傳插件的可用配置參數(shù)如下：

其中，errorHandler參數(shù)帶有一個(gè)errorHandler.method函數(shù)，該函數(shù)錯(cuò)誤信息和類型。

function(msg,type){alert(msg);}

responseValidation對(duì)象的可用屬性有：

• validationKey：類型{String||Object}，設(shè)置驗(yàn)證信息。

• resultKey：類型{String||Object}，設(shè)置返回驗(yàn)證信息。

• success：類型{String}，設(shè)置成功信息。

• error：類型{String}，設(shè)置錯(cuò)誤信息。

例如：

//structure 1
$('#ss-uploader').ssi_uploader({
  responseValidation:{
    validationKey: 'type',
    resultKey: 'data',
    success: 'success',
    error: 'error'
  }
});
 
//result
 /*
  {
    type:'error',
    data:'Already Exists.'
  } 
*/
 
//structure 2
$('#ss-uploader').ssi_uploader({
  responseValidation:{
    validationKey: {
      success: 'success',
      error: 'error'
    },
    resultKey: 'validationKey'
  }
})
//result
 /*
  {
    error:'Already Exists.'
  } 
*/

回調(diào)函數(shù)

ssi-uploader文件生成插件支持4種回調(diào)函數(shù)：beforeUpload、beforeEachUpload、onUpload和onEachUpload。

beforeUpload

beforeUpload回調(diào)函數(shù)在文件上傳前執(zhí)行的回調(diào)函數(shù)。

$('input').ssi_uploader({url:'uploadAction.php',beforeUpload:function(){
   console.log('文件上傳準(zhǔn)備就緒！');
}})
 
$('input').on('beforeUpload.ssi-uploader',function(){console.log('一個(gè)文件準(zhǔn)備上傳。')});

beforeEachUpload

beforeEachUpload回調(diào)函數(shù)在每一個(gè)單獨(dú)的文件上傳前執(zhí)行的回調(diào)函數(shù)。該函數(shù)訪問每個(gè)文件的信息和xhr對(duì)象。如果終止了某個(gè)文件，你可以設(shè)置一個(gè)字符串，提示取消的原因，并顯示的錯(cuò)誤信息中。

$('input').ssi_uploader({url:'uploadAction.php',beforeEachUpload:function(fileInfo,xhr){
   console.log(fileInfo.name+' '+fileInfo.type+' '+fileInfo.size);
   if(fileInfo.size > 1){ xhr.abort(); }
   return '文件尺寸太大！';
}});
 
$('input').on('beforeEachUpload.ssi-uploader',function(){console.log('A file is going for uploading.')});

onUpload

beforeUpload回調(diào)函數(shù)在文件上傳后執(zhí)行的回調(diào)函數(shù)。

$('input').ssi_uploader({url:'uploadAction.php',onUpload:function(){
   console.log('文件上傳完畢！');
}})
 
$('input').on('onUpload.ssi-uploader',function(){console.log('文件上傳完畢！')});

onEachUpload

beforeUpload回調(diào)函數(shù)在每一個(gè)單獨(dú)的文件上傳后執(zhí)行的回調(diào)函數(shù)。

$('input').ssi_uploader({url:'uploadAction.php',onEachUpload:function(fileInfo){
   console.log(fileInfo.uploadStatus+' 'fileInfo.name+' '+fileInfo.type+' '+fileInfo.size+' '+fileInfo.uploadStatus);
}});
 
$('input').on('onEachUpload.ssi-uploader',function(){console.log('A file uploaded.')});