jQuery File Upload文件上傳插件簡單使用

前言

開發過程中有時候需要用戶在前段上傳圖片信息，我們通常可以使用form標簽設置enctype=”multipart/form-data” 屬性上傳圖片，當我們點擊submit按鈕的時候，圖片信息就會自動的保存在預定義變量$_FILES中，我們在后台就可以通過這個預定義變量得到前台上傳的圖片信息，除了這種方法還有很多插件可以實現上傳圖片功能的。jQuery-file-Upload就是其中一種,而且可以實現跨域傳輸.

jQuery-file-Upload介紹

jQuery File Upload 是一個Jquery圖片上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預覽、列表顯示圖片大小，支持上傳進度條顯示；支持各種動態語言開發的服務器端。

使用步驟

1.引入

<!--1. 基於jquery ui-->
<script src="assets/jqueryFileupload/jquery.ui.widget.js"></script>
<!--2. 遇見跨域-->
<!--<script src="assets/jqueryFileupload/jquery.iframe-transport.js"></script>-->
<!--3. 核心文件-->
<script src="assets/jqueryFileupload/jquery.fileupload.js"></script>

　　

2.准備html

<div class="form-group" style="position: relative">
      <button class="btn btn-default">上傳圖片</button>
      <input id="fileUpload" type="file" name="pic1">
<!--安置一個隱藏的input標簽 用來存儲圖片上傳成功后的圖片路徑   以便提交表單時 一並提交  以后就能根據路徑找到這個文件了-->
      <input type="hidden" name="brandLogo">
</div>
<!-- 此盒子與插件功能無關 顯示上傳圖片的預覽 未上傳時時默認圖 一般為灰色底圖  -->
<div class="img_box">
　　<img src="images/default.png" alt="" width="100" height="100">
</div>

3.js代碼

 /*3.2 初始化 上傳圖片*/
    $('#fileUpload').fileupload({
        url:'/category/addSecondCategoryPic',
        dataType:'json',
        done:function (e,data) {
            $('.img_box img').attr('src',data.result.picAddr);//動態修改預覽圖的src
            $('[name="brandLogo"]').val(data.result.picAddr);//圖片上傳成功后 后台返回來的圖片路徑  前后台要約定好
            $('#addCategoryForm').data('bootstrapValidator').updateStatus('brandLogo','VALID',null)
        }
    });

 4.參數解釋　

1: url：請求發送的目標url

　　Type: string

　　Example: '/path/to/upload/handler.json'

2.Type: 文件上傳HTTP請求方式，可以選擇“POST”，“PUT”或者"PATCH",

　　默認"POST"

　　Type: string

　　Example: 'PUT'

3. dataType:希望從服務器返回的數據類型，默認"json"

　　Type: string

　　Example: 'json'

4. autoUpload:默認情況下，只要用戶點擊了開始按鈕被添加至組件的文件會立即上傳。將autoUpload值設為true可以自動上傳。

　　Type: boolean

　　Default: true

5. acceptFileTypes：允許上傳的的文件類型

　　Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i

6. maxFileSize: 最大上傳文件大小

　　Example: 999000 (999KB) //單位：B

7. minFileSize:最小上傳文件大小

　　Example: 100000 (100KB) //單位：B

8.previewMaxWidth : 圖片預覽區域最大寬度

　　Example: 100 //單位：px

5.回調函數

1. add: 當文件被添加到上傳組件時被觸發

2. processalways: 當一個單獨的文件處理隊列結束（完成或失敗時）觸發

3. progressall: 全局上傳處理事件的回調函數

4. fail : 上傳請求失敗時觸發的回調函數，如果服務器返回一個帶有error屬性的json響應這個函數將不會被觸發。

5. done : 上傳請求成功時觸發的回調函數，如果服務器返回一個帶有error屬性的json響應這個函數也會被觸發。

6. always : 上傳請求結束時（成功，錯誤或者中止）都會被觸發。