html5uploader
簡單基於h5的上傳文件上傳插件(根據網上資源修改)
使用方法
- 頁面引用css與js
- 定義一個div
<div id="uploader"></div>
- 調用
$('#uploader').html5uploader({ auto:true, multi:false, basePath:'/Scripts/h5uploader/', savePath:'/Upload/Files/' });
參數說明
| 字段 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| fileTypeExts | 數組 | [] | 允許上傳的文件類型,文件后綴字符集合 ['.docx','.xls'] |
| auto | 布爾 | false | 自動上傳 |
| multi | 布爾 | true | 多文件 |
| buttonText | 字符 | 選擇文件 | 上傳按鈕上的文字 |
| removeTimeout | 數字 | 1000 | 上傳完成后進度條的消失時間(毫秒) |
| formData | Object | - | 附加的參數 |
| fileDataName | 字符 | fileData | 上傳時的文件參數名稱 |
| initQueue | 數組 | [] | 初始化顯示的隊列,編輯時傳入已保存文件的路徑列表,{name:'顯示的名稱',path:'服務器路徑'} |
| maxQueue | 數字 | 999 | 允許上傳的最大數 |
| fileSizeLimit | 數字 | 0 | 文件大小限制(單位KB),0時表示不限制 |
| savePath | 字符 | 空 | 文件保存的相對路徑(即服務器路徑) 必選 |
| saveFileNameTemplate | 字符 | '${prefix}_${fileName}' | 保存的文件名模版,可用參數 ${prefix}:前綴,格式為yyyyMMddHHmmssfff的時間戳 ${fileName}:原始文件名 |
| basePath | 字符 | 空 | 插件的基礎路徑,即h5uploader的文件夾路徑,如:/Scripts/h5uploader/ 必選 |
事件
| 事件 | 參數 | 說明 |
|---|---|---|
| onInit | 無 | 初始化時的動作 |
| onUploadStart | file:文件對象 | 上傳開始時的動作 |
| onUploadSuccess | file:文件對象 res:服務器響應信息 |
上傳成功的動作 |
| onUploadComplete | file:文件對象 res:服務器響應信息 |
上傳完成的動作 |
| onUploadError | file:文件對象 res:服務器響應信息 |
上傳失敗的動作 |
| onSelectedFiles | files:選擇的文件數組 | 選擇文件后的事件,接收一個布爾的返回值,false時取消上傳 |
| onDeletedFile | filepath:包含文件名的文件完整相對路徑 | 刪除隊列中的文件時觸發 |
| onFileTypeError | 無 | 文件類型不允許時的回調 |
| onFileSizeError | 無 | 文件大小超出限制時的回調 |
| onQueueFull | 無 | 文件個數超出限制的回調 |
