淺談異步上傳插件 jquery-file-upload插件

時間 2019-12-02

標籤淺談異步上傳插件 jquery file upload 欄目 JQuery 简体版

原文原文鏈接

當咱們須要異步上傳文件的時候，咱們傾向於在網上查找相關的JQuery插件，jquery-file-upload就是咱們常常看到的，可是他的主頁是英文的，對於咱們這些英語比較差的同窗來講，簡直就是。。。今天就來說一下最簡單的使用方法，若是有寫的很差的地方還請拍磚。php

介紹

jQuery File Upload是一個很是優秀的上傳組件，主要使用了XHR做爲上傳方式，而且利用了至關多的現代瀏覽器功能，因此能夠實現諸如批量上傳、超大文件上傳、圖片預覽、拖拽上傳、上傳進度顯示、跨域上傳等功能。html

他的功能很是強大，API也比較簡單，若是可以熟練使用$.ajax的話，相信理解起來也不是多難的事，可是它的UI也會很是難用。我的建議，若是小的組件能夠本身定義一套簡單的UI，不必使用那麼複雜的東西。若是你必定要使用它的UI的話，建議你看一下定製jQuery File Upload爲微博式單文件上傳jquery

jQuery File Upload的簡化模型

jQuery File Upload包含了一堆文件，首先須要弄清楚的是最核心的部分是哪些，官網已經給出了最簡單的模型基本功能，一個最簡單的jQuery File Upload上傳組件，必須包括如下文件：git

jQuery庫，建議jQuery 1.8以上版本
js/vendor/jquery.ui.widget.js ： jQuery UI Widget
js/jquery.iframe-transport.js ：擴展iframe數據傳輸
js/jquery.fileupload.js ： jQuery File Upload核心類
js/cors/jquery.xdr-transport.js 在IE下應載入此文件解決跨域問題

官網事例：github

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

當咱們須要點擊按鈕才能提交上傳的時候，按鈕上傳ajax

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

淺談設計原理

當咱們對某個file input標籤執行 upload插件的初始化方法後，插件會監聽這個file input的change事件

當用戶選擇文件的時候，會觸發change事件json

if ($.support.fileInput) {
     this._on(this.options.fileInput, {
         change: this._onChange
     });
 }

在_onChange處理函數中，會遍歷files，觸發upload插件的change方法
當change函數返回true的時候，會觸發upload插件的add方法
在upload插件的回調函數中，會傳入兩個參數，fn(事件信息, 數據對象)，這個數據對象很是重要，咱們幾乎全部的操做都要使用到它
在upload插件的add方法中能夠執行咱們的邏輯，例如咱們想判斷文件後綴是否知足條件，插件自帶的參數 acceptFileTypes 在簡化模型中不起做用，咱們能夠在change和add方法中判斷，若是不知足返回false便可，若是經過能夠直接執行data.submit()進行提交
若是上傳成功會執行done函數（響應成功），失敗則會執行fail函數
全部的回調函數的原理都是同樣的，後面的你們本身研究api