上傳檔案是各種系統遇到機率都很高的一個功能，傳統要讓使用者上傳檔案，最簡單的方法就是加個<input type="file">，但呈現的結果並不是很好看，雖然可以透過CSS來調整外觀，但整體還是有受限的感覺，使用上也稍微不太方便；而今天要介紹的Dropzone.js可以幫助我們使用更加直覺簡單的方式，來完成上傳檔案的功能。
關於Dropzone.js
Dropzone.js是一款美觀強大的檔案上傳library，可以讓我們系統在處理上傳檔案這個功能的操作上更加簡單明瞭，它具有幾個特色
- 支援多檔案上傳
- 可使用drag & drop的方式上傳檔案，範圍大也不容易拉到錯的地方
- 如果上傳的是圖片，可顯示圖片預覽
- 功能強大但檔案很小，大約75k左右而已
- 純JavaScript，不相依於jquery等其他library
- 容易客製化
開始使用Dropzone.js
要開始使用Dropzone.js非常簡單，載入basic.css / dropzone.css / dropzone.js之後，在頁面上加一個表單，並給一個dropzone的class就好
<form action="/file-upload" id="form1" class="dropzone"></form>
就可以看到一個標準的拖拉區塊可以上傳檔案囉
至於server端該如何處理上傳的檔案，則依後端的程式語言和業務邏輯有不同的實作，但只需要把上面的程式碼當程式已下程式碼的ajax + 美化版本就好了
<form action="/file-upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
</form>
官方網站也提出一些後端操作的指引文件可以參考
http://www.dropzonejs.com/#server-side-implementation
進階使用Dropzone.js
根據Dropzone.js的Configuration文件，例如預設Dropzone會加入<input type="file" name="file" />，若希望更改name="file"這塊(假設已經有完成的後端?)，則可以在JavaScript中設定paraName：
Dropzone.options.form1 = {
paramName: "upload"
};
預設的Dropzone會出現"Drop files here to upload"，如果希望更改這裡的文字，則可以設定dictDefaultMessage
Dropzone.options.form1 = {
dictDefaultMessage: "把檔案拉到這裡就可以上傳"
};
除此之外Dropzone.js也有許多事件可以使用，例如我們可以透過addedfile，來判斷當user把檔案拉到我們的上傳檔案區塊時要做些什麼事情
Dropzone.options.form1 = {
init: function() {
this.on("addedfile", function(file) { console.log(file); });
}
};
類似資源:
- FineUploader：功能比Dropzone.js更加強大，甚至能直接支援上傳到Amazon S3或Azure Blob Storage，當然相對的設定也稍微比較複雜。
- jQueryFileUpload：屬於jQuery的外掛，使用上也不算太複雜。
- Bootstrap File Input：相依於Bootstrap及jQuery，功能不少，提供的DEMO也相當多元，對於已經使用bootstrap的開發人員來說可以達到一致的UI效果。
- Bootstrap Filestyle：基本上不算是上傳用的library，主要是用來美化原本的上傳按鈕，對於只需要基本的上傳按鈕，卻又覺得上傳按鈕不好看(或不同作業系統UI不一致)時，做為美化使用。
