知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    文件拖拽上傳插件dropzone.js

    作者:佳明媽 來源:鄭州網站設計 2016-11-09 人氣:
    文件拖拽上傳插件dropzone.js,提供 AJAX 異步文件上傳功能,支持拖拽文件上傳、支持最大文件大小、支持設置文件類型、支持預覽上傳結果,不依賴jQuery庫。

    文件拖拽上傳插件dropzone.js,提供 AJAX 異步文件上傳功能,支持拖拽文件上傳、支持最大文件大小、支持設置文件類型、支持預覽上傳結果,不依賴jQuery庫。

    文件拖拽上傳插件dropzone.js的使用

    建立一個正式的上傳form表單,并且給表單一個.dropzone的class

    <form id="mydropzone" action="/upload.php" class="dropzone"></form>

    就這樣,Dropzone會自動找到.dropzone的表單form元素,并且通過action屬性,上傳到后臺接收文件的程序,如upload.php,就像接受一個很普通的file input表單:

    <input type="file" name="file" />

    然后,在你的upload.php中寫上傳代碼,Dropzone官網下載的只有js代碼,沒有后臺的上傳代碼,不過,helloweba.com為您提供了php版的完整上傳實例代碼,歡迎下載源碼。

    引入dropzone.js

    <script src="dropzone.min.js"></script>

    然后什么都不用做了,打開瀏覽器,測試拖拽上傳效果。當然樣式你可以自己寫,也可以參照我們的實例代碼。

    還有一種情況,我們不希望上傳的html中有form表單,那么好,我們只要在html中放置一個div#mydropzone

    <div id="mydropzone" class="dropzone"></div>

    配置一下js調用

    var myDropzone = new Dropzone("div#mydropzone", { url: "upload.php"});

    如果您使用的是jquery,那么jQuery版的可以這樣調用:

     $("#dropz").dropzone({ 
        url: "upload.php" 
     })

    運行你的網頁,是不是一樣可以看到上傳效果。

    配置Dropzone

    Dropzone的特色就在于非常靈活,提供了許多可選項、事件等。下面是Dropzone幾個常用的配置項。

    url:最重要的參數,指明了文件提交到哪個頁面。

    method:默認為post,如果需要,可以改為put。

    paramName:相當于<input>元素的name屬性,默認為file。

    maxFilesize:最大文件大小,單位是 MB。

    maxFiles:默認為null,可以指定為一個數值,限制最多文件數量。

    addRemoveLinks:默認false。如果設為true,則會給文件添加一個刪除鏈接。

    acceptedFiles:指明允許上傳的文件類型,格式是逗號分隔的 MIME type 或者擴展名。例如:image/*,application/pdf,.psd,.obj

    uploadMultiple:指明是否允許 Dropzone 一次提交多個文件。默認為false。如果設為true,則相當于 HTML 表單添加multiple屬性。

    headers:如果設定,則會作為額外的 header 信息發送到服務器。例如:{"custom-header": "value"}

    init:一個函數,在 Dropzone 初始化的時候調用,可以用來添加自己的事件監聽器。

    forceFallback:Fallback 是一種機制,當瀏覽器不支持此插件時,提供一個備選方案。默認為false。如果設為true,則強制 fallback。

    fallback:一個函數,如果瀏覽器不支持此插件則調用。

    翻譯選項

    • dictDefaultMessage:沒有任何文件被添加的時候的提示文本。

    • dictFallbackMessage:Fallback 情況下的提示文本。

    • dictInvalidInputType:文件類型被拒絕時的提示文本。

    • dictFileTooBig:文件大小過大時的提示文本。

    • dictCancelUpload:取消上傳鏈接的文本。

    • dictCancelUploadConfirmation:取消上傳確認信息的文本。

    • dictRemoveFile:移除文件鏈接的文本。

    • dictMaxFilesExceeded:超過最大文件數量的提示文本。

    添加事件監聽

    如果你希望在一個事件發生時采取一些額外的操作,而不干擾 Dropzone 的默認行為,那么你應該通過添加事件監聽器的辦法對事件做出響應,而非重寫默認事件函數。

    重寫默認事件函數的例子如下:

    $("#dropz").dropzone({
        addedfile: function() {
            // actions...
        }
    });

    如果你重寫默認事件函數,該事件發生時插件默認采取的動作將被覆蓋。大多數情況下你僅僅想在事件發生時添加自己的行為,那么應該使用on方法。

    jQuery 版本:

    $("#dropz").dropzone({
        init: function() {
            this.on("addedfile", function(file) {
                // actions...
            });
        }
    });

    非 jQuery 版本:

    dropz.on("addedfile", function(file) {
        // actions...
    });

    常用事件

    以下事件接收 file 為第一個參數

    • addedfile:添加了一個文件時發生。

    • removedfile:一個文件被移除時發生。你可以監聽這個事件并手動從服務器刪除這個文件。

    • uploadprogress:上傳時按一定間隔發生這個事件。第二個參數為一個整數,表示進度,從 0 到 100。第三個參數是一個整數,表示發送到服務器的字節數。當一個上傳結束時,Dropzone 保證會把進度設為 100。注意:這個函數可能被以同一個進度調用多次。

    • success:文件成功上傳之后發生,第二個參數為服務器響應。

    • complete:當文件上傳成功或失敗之后發生。

    • canceled:當文件在上傳時被取消的時候發生。

    • maxfilesreached:當文件數量達到最大時發生。

    • maxfilesexceeded:當文件數量超過限制時發生。

    以下事件接收一個 file list 作為第一個參數(僅當uploadMultiple被設為true時才會發生)

    • successmultiple

    • completemultiple

    • cancelmultiple

    特殊事件

    • totaluploadprogress:第一個參數為總上傳進度,第二個參數為總字節數,第三個參數為總上傳字節數。

    例子

    這里我使用上面的選項、事件等寫了一個例子,供參考:

    <div class="dropz"></div>
    <script>
        $(".dropz").dropzone({
            url: "handle-upload.php",
            addRemoveLinks: true,
            dictRemoveLinks: "x",
            dictCancelUpload: "x",
            maxFiles: 10,
            maxFilesize: 5,
            acceptedFiles: ".js",
            init: function() {
                this.on("success", function(file) {
                    console.log("File " + file.name + "uploaded");
                });
                this.on("removedfile", function(file) {
                    console.log("File " + file.name + "removed");
                });
            }
        });
    </script>

    外觀

    Dropzone 下載之后沒有自帶任何 CSS 樣式(人家只有一個 js 文件嘛)。我覺得官網提供的 Demo 的外觀設計就非常不錯,可以供大家參考。

    其他教程

    Dropzone 的作者在插件的 GitHub Wiki 頁面上提供了很多額外教程,非常好,也推薦大家看一看。

    這里我只翻譯一部分我覺得常用的教程的標題:

    1. 如何顯示服務器返回的錯誤信息?

    2. 如何在所有文件上傳完畢時得到通知?

    3. 如何顯示出已經保存在服務器上的文件?

    4. 自己實現刪除文件時的提示功能

    5. 為文件提供自定義縮略圖

    6. 點擊一個按鈕再上傳所有文件

    7. 點擊一個按鈕刪除所有文件

    8. 把 Dropzone 放到一個已存在的表單中

    更多有關Dropzone的信息請參考官網:http://www.dropzonejs.com/
    原文:http://www.helloweba.com/view-blog-393.html


    ↓ 查看全文

    文件拖拽上傳插件dropzone.js由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    文件拖拽上傳插件dropzone.js-最新評論

    • 高仿包包 2017-03-21 09:09:44
      [bofu心灰意冷]原單[bofu心灰意冷] Valentino(華倫天奴) Juicy Couture (橘滋) Noble Family(貴族世家) ?? ??(漂亮公主) CASIO(卡西歐) CHANEL(香奈兒) shechipin.ga
    老子是皇帝在线客服