jQuery FileUpload 插件

jQuery FileUpload 插件

在前端開發過程當中，咱們常常要上傳文件，這是咱們就要用 <input type="file" name="file">這是原生的寫法，看起來不是很美觀。下面咱們聊一種比較優雅的實現方法。

---

上傳文件

首先，咱們隱藏的input框，並將input框的click事件綁定到它上面的button元素上（經過onclick="$(this).next().click()"實現），這樣咱們就能夠按照咱們本身的喜愛來設置button的樣式，同時也達到了上傳文件的功能。

<button type="button" onclick="$(this).next().click()">
    <i class="fa fa-upload mr-sm" aria-hidden="true"></i><span>導入</span>
</button>

<input type="file" name="file" style="display:none" class="btn-upload">

---

fileupload 事件

jQuery File Upload 是一個Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預覽、列表顯示圖片大小，支持上傳進度條顯示；支持各類動態語言開發的服務器端。
咱們這裏主要說說文件上傳和文件格式、 大小的要求

引入相關插件

fileupload插件是必須的，fileupload-process負責處理上傳過程當中各個事件的管理，fileupload-validate則是對驗證的支持

<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-process.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-validate.js"></script>

使用插件

咱們能夠對上傳文件的大小和文件類型進行驗證，並經過messages設置驗證失敗時的提示信息。

$('input[name="file"]').fileupload({

       url: '上傳地址',
       Type: "POST",
       autoUpload: true,
       acceptFileTypes:/\.(doc|docx)$/i,// 文件格式
       maxFileSize: 99 * 1024 * 1024, //文件大小
       
       // 設置驗證失敗的提示信息
       messages: {
       maxFileSize: 'File exceeds maximum allowed size of 99MB',
       acceptFileTypes: 'File type not allowed'
       },
       
       processfail: function (e, data) {
           var currentFile = data.files[data.index];
           if (data.files.error && currentFile.error) {
               // there was an error, do something about it
               console.log(currentFile.error);
           }
       },
       
       done: function() {
          // 上傳成功的回調函數，能夠彈出「上傳成功」之類的彈框
       },
       fail: function() {
          // 上傳失敗的回調函數，能夠彈出「上傳失敗」之類的彈框
       },

     })

---

Jquery 有不少很好用的插件，逐個去學習不是很現實，只有在用到的時候，盡力去搞懂其使用方法。慢慢積累吧~~~