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

簡要教程

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

安裝

可以通過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結構

最基本的文件上傳HTML結構是使用一個<input>元素，類型為file，并指定一個id。

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

初始化插件

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

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

配置參數

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

其中，errorHandler參數帶有一個errorHandler.method函數，該函數錯誤信息和類型。

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

responseValidation對象的可用屬性有：

• validationKey：類型{String||Object}，設置驗證信息。

• resultKey：類型{String||Object}，設置返回驗證信息。

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

• error：類型{String}，設置錯誤信息。

例如：

//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.'
  } 
*/

回調函數

ssi-uploader文件生成插件支持4種回調函數：beforeUpload、beforeEachUpload、onUpload和onEachUpload。

beforeUpload

beforeUpload回調函數在文件上傳前執行的回調函數。

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

beforeEachUpload

beforeEachUpload回調函數在每一個單獨的文件上傳前執行的回調函數。該函數訪問每個文件的信息和xhr對象。如果終止了某個文件，你可以設置一個字符串，提示取消的原因，并顯示的錯誤信息中。

$('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回調函數在文件上傳后執行的回調函數。

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

onEachUpload

beforeUpload回調函數在每一個單獨的文件上傳后執行的回調函數。

$('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.')});