摘要：文件上傳后端接收的參數(shù)名。定義文件預(yù)覽顯示。文件名超過這個(gè)極限時(shí)縮略圖將不會(huì)生成。如果超過事件將被調(diào)用。如果為文本用于取消上傳的文字。文件上傳隊(duì)列當(dāng)一個(gè)文件被添加到其被設(shè)置到函數(shù)檢查通過后，這意味著該文件現(xiàn)在在隊(duì)列中。

官方文檔：http://www.dropzonejs.com/
Github: https://github.com/enyo/dropzone

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.

你可能只需要看看簡(jiǎn)單的例子( 源代碼 )就能開始了。然后繼續(xù)閱讀下面的一步步的指示和不同的安裝方法。

下載獨(dú)立的dropzone.js文件。然后這樣引入到html中：

Dropzone 現(xiàn)在激活和可用,通過window.Dropzone就可以使用了。

Dropzone不處理你的文件上傳在服務(wù)器上。你必須自己實(shí)現(xiàn)代碼接收和存儲(chǔ)文件。有關(guān)更多信息,請(qǐng)參見部分服務(wù)器端實(shí)現(xiàn)。

完成上面的操作就可以使用 Dropzone ，但是如果你想讓它你上傳的樣式看起來像官方頁面那樣,你需要將下載的dropzones里面的cs發(fā)到你的文件夾中并引入。

如果你使用component,你只需添加dropzone依賴：

"enyo/dropzone": "*"

然后這樣引入：

var Dropzone = require("dropzone");

現(xiàn)在它已激活，并可以在頁面中使用。
基本的CSS樣式也包含在組件中，如果你想讓它你上傳的樣式看起來像官方頁面那樣,你需要將下載的dropzones里面的cs發(fā)到你的文件夾中并引入。

Dropzone 同樣為RequireJS提供了AMD模塊。

你可以在下載的文件夾中找到dropzone-amd-module。

使用 dropzone 的典型的方式是通過創(chuàng)建一個(gè)表單包含與class="dropzone":

就像這樣。dropzone 會(huì)通過class為dropzone找到所有的表單元素，并自動(dòng)將這些元素初始化，然后點(diǎn)擊input選擇文件(或拖拽)之后會(huì)根據(jù)action指定的地址上傳文件。(其實(shí)就和普通的文件上傳沒什么區(qū)別，只不過多了個(gè)拖拽)

如果你想在后端接受文件的時(shí)候用其他的name而不是上面指定的file，您可以配置dropzone的paramName的選項(xiàng)。

如果你是使用component形式，別忘了require("dropzone");,否則是不會(huì)生效的。

如果是使用form表單，完成上面的設(shè)置之后，就已經(jīng)可以拖拽上傳了，所以如果你不想在寫一些js去控制上傳中的其他東西，比如進(jìn)度條、預(yù)覽區(qū)域等，可以在form內(nèi)加一個(gè)包含fallback類的標(biāo)簽，dropzone 會(huì)自己處理fallback類的標(biāo)簽區(qū)域，當(dāng)然這是需要瀏覽器支持。如果瀏覽器不支持，那么那就將其作為普通的文件上傳。
這通常是這樣的：

除了直接在form表單中添加class為dropzone讓其自動(dòng)創(chuàng)建外，還可以在非表單元素上面通過實(shí)例化Dropzone類實(shí)現(xiàn)。

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

或如果您使用jQuery,您可以使用jQuery插件Dropzone形式：

// jQuery
$("div#myId").dropzone({ url: "/file/post" });

注意：如果你不是使用一個(gè)表單元素,別忘了指定一個(gè)url選項(xiàng),因?yàn)镈ropzone不知道上傳到那里。

Dropzone 不提供的服務(wù)器端文件處理的代碼,但是文件上傳的方式是和簡(jiǎn)單的表單文件上傳是相同的。比如普通的表單上傳是這樣：

掌握基本的服務(wù)器上的文件上傳,請(qǐng)查看各種語言相應(yīng)的文檔。這里有一些基本的實(shí)現(xiàn)文件：

AngularJS and Spring

NodeJS with express

Ruby on rails

Complete PHP tutorial by startutorial.com

Basic PHP file upload

Tutorial for Dropzone and Lavarel (PHP) written by Maksim Surguy

Symfony2 and Amazon S3

File upload in ASP.NET MVC using Dropzone JS and HTML5

付費(fèi)的文檔：

eBook for Dropzone with PHP by startutorial.com.

如果你需要更多的信息,請(qǐng)看看Dropzone FAQ。

有兩種方式配置 dropzone：

方法一：

在html元素上添加dropzone 樣式類，然后就不需要手動(dòng)使用js去實(shí)例化了，但是你的一些配置Dropzone.options對(duì)象去配置：

// "myAwesomeDropzone" 是那個(gè) HTML 元素的 ID
// 這里的id不是駝峰格式，是以`-`為分隔，如 id="my-awesome-dropzone"
Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don"t.");
    }
    else { done(); }
  }
};

方法二：

最明顯的方式是通過一個(gè)選擇對(duì)象時(shí)實(shí)例化一個(gè)dropzone，以前面手動(dòng)創(chuàng)建dropzones的方式。

常用方法：

因?yàn)槲覀冃枰褂胐ropzone提供的一些樣式，比如預(yù)覽時(shí)圖片樣式等，這樣就算手動(dòng)創(chuàng)建，但也需要使用到dropzone 樣式類，那這樣就會(huì)導(dǎo)致初始化兩次，在控制臺(tái)就會(huì)報(bào)錯(cuò)，這時(shí)候就需要在手動(dòng)初始化之前設(shè)置如下代碼：

// Prevent Dropzone from auto discovering this element:
Dropzone.options.myAwesomeDropzone = false;
// This is useful when you want to create the
// Dropzone programmatically later

// Disable auto discover for all elements:
Dropzone.autoDiscover = false;

例子：

    

        將文件拖拽到此處
或點(diǎn)此打開文件管理器選擇文件
    

像上面這樣，既能使用 dropzone 的樣式，也能自己手動(dòng)初始化上傳。

你也可以覆蓋所有違約事件動(dòng)作選項(xiàng)。如果你提供的drop選項(xiàng)可以覆蓋默認(rèn)的事件處理程序。你應(yīng)該熟悉代碼,因?yàn)槟梢暂p松掌握這樣的上傳。如果你只是想做額外修改,比如添加一些過濾什么的，可以監(jiān)聽事件。

當(dāng)一個(gè)文件被添加到dropzone,其status被設(shè)置到Dropzone.QUEUED(accept函數(shù)檢查通過后)，這意味著該文件現(xiàn)在在隊(duì)列中。

如果你可以選擇autoProcessQueue設(shè)置為true,那么隊(duì)列是立即處理,文件被刪除或一個(gè)上傳完成后,通過調(diào)用.processQueue(),檢查有多少文件正在上傳,如果它少于option.parallelUploads,.processFile將被調(diào)用。

如果你autoProcessQueue設(shè)置為false,那么.processQueue()不會(huì)被隱式地調(diào)用。這意味著當(dāng)你想上傳目前隊(duì)列中所有文件時(shí)你必須自己調(diào)用它。

為每個(gè)文件生成預(yù)覽HTML，設(shè)置dropzone定義的選項(xiàng)previewTemplate,默認(rèn)為：

  

    

    

    
  
  

  
?
  
?
  

當(dāng)文件在上傳過程中的時(shí)候，dz-preview中的dz-processing將被顯示；當(dāng)文件上傳之后dz-success將被顯示；如果文件上傳錯(cuò)誤或沒網(wǎng)dz-error將被顯示，此時(shí)data-dz-errormessage的內(nèi)容將是服務(wù)器端返回的信息。

重寫默認(rèn)的模板，就可以使用配置中的previewTemplate選項(xiàng)。

您可以通過file.previewElement訪問文件的HTML預(yù)覽,并且設(shè)置任何事件。如：

success: function (file, response, e) {
    var res = JSON.parse(response);
    if (res.error) {
        $(file.previewTemplate).children(".dz-error-mark").css("opacity", "1")
    }
}

如果你想打破常規(guī)重寫previewElement,可以在你想要的元素上添加data-dz-*屬性：

data-dz-name

data-dz-size

data-dz-thumbnail (這個(gè)必須是 元素，然后該元素的 alt 和 src 屬性會(huì)被 Dropzone 自動(dòng)改變?yōu)橄鄳?yīng)的值)

data-dz-uploadprogress (當(dāng)文件處于上傳過程中的時(shí)候Dropzone 將改變此元素的 style.width 的值，從 0% 到 100%)

data-dz-errormessage
Dropzone將尋找這些元素，并改變默認(rèn)選項(xiàng)和更新它的內(nèi)容。

如果你想要一些特定鏈接刪除一個(gè)文件(而不是建于addRemoveLinks配置),您可以簡(jiǎn)單地插入元素的模板data-dz-remove屬性。

你也不用被這些使用慣例所強(qiáng)迫。如果你完全覆蓋所有默認(rèn)事件監(jiān)聽器可以從頭開始重建你的布局。

如果你想讓你的dropzone看起來像官方頁面那樣，使用安裝部分提供的添加樣式表和spritemaps即可。

看到主題部分,看看如何改變Dropzone 的UI。

官方創(chuàng)建了一個(gè)例子,配置幾行代碼，讓Dropzone看起來和感覺完全和jQuery文件上傳差不多。Check it out!

如果你想刪除已添加的文件,你可以調(diào)用.removeFile(file)。這種方法也觸發(fā)removedfile事件。

下面是一個(gè)示例,文件上傳完成后將自動(dòng)刪除：

myDropzone.on("complete", function(file) {
  myDropzone.removeFile(file);
});

如果你想刪除所以的文件，簡(jiǎn)單地使用.removeAllFiles()。正在上傳中的文件不會(huì)被刪除。如果你想取消正在上傳的文件，調(diào)用.removeAllFiles(true)將取消上傳。

如果你設(shè)置了autoProcessQueue為false,你必須調(diào)用.processQueue()實(shí)現(xiàn)上傳。

訪問dropzone中的所有文件,使用myDropzone.files。

所有可接受的文件：.getAcceptedFiles()

所以被拒絕的文件：.getRejectedFiles()

隊(duì)列中的所有文件：.getQueuedFiles()

上傳中的所有文件：.getUploadingFiles()
如果不在需要一個(gè)dropzone,使用當(dāng)前示例調(diào)用.disable()，這將移除該元素上的事件、文件。重新激活使用.enable()。`

如果你不喜歡瀏覽器默認(rèn)的confirm,您可以通過覆蓋Dropzone.confirm處理它們:

Dropzone.confirm = function(question, accepted, rejected) {
  // Ask the question, and call accepted() or rejected() accordingly.
  // CAREFUL: rejected might not be defined. Do nothing in that case.
};

Dropzone觸發(fā)事件在處理文件時(shí),你可以通過當(dāng)前實(shí)例調(diào)用.on(eventName, callbackFunction)監(jiān)聽事件。

因?yàn)槁犑录荒苁荄ropzone實(shí)例,設(shè)置你的事件偵聽器,最好的地方是在init函數(shù)。

Dropzone.options.myAwesomeDropzone = {
  init: function() {
    this.on("addedfile", function(file) { alert("Added file."); });
  }
};

如果你手動(dòng)創(chuàng)建dropzones,你可以設(shè)置實(shí)例的事件監(jiān)聽器,就像這樣:

// This example uses jQuery so it creates the Dropzone, only when the DOM has
// loaded.

// Disabling autoDiscover, otherwise Dropzone will try to attach twice.
Dropzone.autoDiscover = false;
// or disable for specific dropzone:
// Dropzone.options.myDropzone = false;

$(function() {
  // Now that the DOM is fully loaded, create the dropzone, and setup the
  // event listeners
  var myDropzone = new Dropzone("#my-dropzone");
  myDropzone.on("addedfile", function(file) {
    /* Maybe display some more file information on your page */
  });
})

這是更復(fù)雜的,沒有必要的,除非你有一個(gè)很好的理由來管理實(shí)例化Dropzones。

Dropzone本身嚴(yán)重依賴事件，視覺上的展示都是通過監(jiān)聽去做的。這些事件監(jiān)聽器設(shè)置在每個(gè)Dropzone的默認(rèn)配置,可以覆蓋,從而取代默認(rèn)的行為實(shí)現(xiàn)自己的事件回調(diào)。

如果你想對(duì)Dropzone的主題完全自定義,在大多數(shù)情況下,您可以簡(jiǎn)單地取代HTML模板預(yù)覽,調(diào)整CSS,也可以創(chuàng)建一些額外的事件監(jiān)聽器。

官方創(chuàng)建了一個(gè)例子,配置幾行代碼，讓Dropzone看起來和感覺完全和jQuery文件上傳差不多。Check it out!。正如您可以看到的,最大的變化就是previewTemplate。然后添加了一些額外的事件監(jiān)聽器來讓它看起來符合自己的要求。

然而,您可以完全從頭開始實(shí)現(xiàn)您的UI。

覆蓋默認(rèn)的事件監(jiān)聽器,創(chuàng)建您自己的自定義Dropzone,可以這樣：

// This is an example of completely disabling Dropzone"s default behavior.
// Do *not* use this unless you really know what you are doing.
Dropzone.myDropzone.options = {
  previewTemplate: document.querySelector("#template-container").innerHTML,
  // Specifing an event as an configuration option overwrites the default
  // `addedfile` event handler.
  addedfile: function(file) {
    file.previewElement = Dropzone.createElement(this.options.previewTemplate);
    // Now attach this new element some where in your page
  },
  thumbnail: function(file, dataUrl) {
    // Display the image in your file.previewElement
  },
  uploadprogress: function(file, progress, bytesSent) {
    // Display the progress
  }
  // etc...
};

上面的這些代碼顯然缺乏實(shí)際的實(shí)現(xiàn)。看源代碼,看看Dropzone內(nèi)部的實(shí)現(xiàn)。

如果你不需要任何默認(rèn)Dropzone UI，只對(duì)Dropzone的事件處理程序、文件上傳和拖拽功能感興趣,那你應(yīng)該使用以上選項(xiàng)事件處理。

如果你不想要默認(rèn)消息提示(拖拽文件上傳(或單擊)),您可以在你dropzone元素內(nèi)添加一個(gè)元素包含類dz-message，這樣dropzone就不會(huì)為您創(chuàng)建的消息。

Dropzone 或提交你設(shè)置的form內(nèi)的所有隱藏的表單域信息。所以當(dāng)你是使用form元素的形式的話，這是一個(gè)簡(jiǎn)單的方法來提交額外的數(shù)據(jù)，至于是get還是post取決于你form的method。當(dāng)然也可以在js配置中添加其他的參數(shù)。

當(dāng)事件綁定完成之后，Dropzone 會(huì)添加數(shù)據(jù)到file對(duì)象。如果是image的話，你可以通過file.width 和 file.height訪問到圖片的寬度和高度。而且file.upload對(duì)象會(huì)包含如下信息：progress (0-100), total (總字節(jié)) and bytesSent（已上傳字節(jié)）。這樣你可以通過這寫信息自定義上傳進(jìn)度條等。

如果你想給上傳的文件添加額外（多個(gè)文件時(shí)會(huì)具體到每個(gè)文件）,您可以注冊(cè)發(fā)送事件：

myDropzone.on("sending", function(file, xhr, formData) {
  // Will send the filesize along with the file as POST data.
  formData.append("filesize", file.size);
});

文件上傳之后，可以通過file.previewElement訪問上傳后文件的預(yù)覽html。例如：

myDropzone.on("addedfile", function(file) {
  file.previewElement.addEventListener("click", function() {
    myDropzone.removeFile(file);
  });
});

如果你想整個(gè)的body都是一個(gè)Dropzone實(shí)例而且在某個(gè)地方顯示文件預(yù)覽，那你可以簡(jiǎn)單地為body實(shí)例化一個(gè)Dropzone對(duì)象，提示定義previewsContainer 選項(xiàng)。這個(gè)previewsContainer可以是dropzone-previews或dropzone類，以便正確顯示文件預(yù)覽：

new Dropzone(document.body, {
  previewsContainer: ".dropzone-previews",
  // You probably don"t want the whole body
  // to be clickable to select files
  clickable: false
});

可以在github wiki尋找更多的例子。

本節(jié)描述Dropzone兼容瀏覽器和舊版本。

Chrome 7+

Firefox 4+

IE 10+

Opera 12+ (MacOS V12版本無法使用，因?yàn)樗腁PI有問題)

Safari 6+

對(duì)于所有其他瀏覽器,dropzone提供一個(gè)版的文件輸入回退。
在老式瀏覽器中拖放是沒有解決方案，畢竟它不支持嘛~~,其次dropzone的圖片預(yù)覽也是同樣的道理。
但是，用戶使用老式瀏覽器還是可以上傳文件滴，只是看起來和感覺起來都不是很棒。
哎,年代已經(jīng)不屬于它們了。

這不是一個(gè)更新日志。只列出兼容性問題。

改變默認(rèn)previewTemplate。布局做了新調(diào)整layout sectin.

使用SVG代替PNG spritemap(CSS文件現(xiàn)在唯一需要包括的附加文件)

這不是一個(gè)更新日志。只列出兼容性問題。

這不是一個(gè)更新日志。只列出兼容性問題。

從2.0版本開始,Dropzone不再依賴jQuery,如果使用了jQuery，Dropzone 通過jQuery模塊的形式加載自身。
這意味著創(chuàng)建Dropzones這樣仍能工作：

$("#my-dropzone").dropzone({ /* options */ });

如果你通過普通構(gòu)造函數(shù)的形式創(chuàng)建Dropzones,你必須通過原始HTMLElement,或者一個(gè)選擇器字符串選擇相應(yīng)的元素，這樣該版本才能運(yùn)行：

// With jQuery
new Dropzone($("#my-dropzone").get(0));
// Without jQuery
new Dropzone("#my-dropzone");
new Dropzone(document.querySelector("#my-dropzone"));

另外一個(gè)改變就是，Dropzone不再存儲(chǔ)實(shí)例內(nèi)部元素的數(shù)據(jù)屬性。為了得到一個(gè)dropzone元素這樣做：

// DEPRECATED, do not use:
$("#my-dropzone").data("dropzone"); // won"t work anymore
// Do this now:
Dropzone.forElement(element); // Providing a raw HTMLElement
// or
Dropzone.forElement("#my-dropzone"); // Providing a selector string.

博客: http://blog.helloarron.com
Github: https://github.com/ArronYR
Email: [email protected]

因?yàn)橛⒄Z不好，花了一天的時(shí)間才完成，讓大家見笑了。有很多地方都不完善，還望大家指出修正，如果你覺得這個(gè)對(duì)你有用，還請(qǐng)點(diǎn)個(gè)“推薦”，謝謝！