實現拖拽上傳檔案的一款小控制元件——dropzone
阿新 • • 發佈：2018-12-23
因為專注所以專業。很多小巧的東西乍一看很不起眼，卻在特定的領域表現不俗，就是因為集中了熱情。
dropzone就是這樣一款小控制元件，實現拖拽上傳。它不依賴於其它像jquery等JS庫，而且支援多方面的定製。
使用Dropzone所需要的準備工作很簡單，你只需要在你的頁面中增加：
<script src="./path/to/dropzone.js"></script> 如果想讓自己的拖拽上傳空間再顯得美觀些，比如提供上傳預覽啊什麼的，可以使用作者提供的 另外幾個檔案：
css/dropzone.css
images/spritemap.png
images/[email protected]使用Dropzone通常是建立一個form控制元件來引用：
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone"></form>其實上面的程式碼可以簡單的理解成內部包含著如下一段程式碼：
<input type="file" name="file" />我寫了一個引用的例子：
大家可以試試效果，頁面是這樣的：<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <TITLE>dropzonejs test</TITLE> </HEAD> <link href=./dropzone/dropzone.css rel=stylesheet /> <script src="./dropzone/dropzone_gbk.js"></script> <style type="text/css"> span.ts { color:rgb(0,0,255) } input.btn { width: 71px; height: 20px; } </style> <SCRIPT LANGUAGE="JavaScript"> // 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; //拖拽直接上傳 Dropzone.options.myAwesomeDropzone = { paramName : "userfile2", // 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(); } }, init : function() { document.getElementById("divText").innerHTML = "拖拽檔案後將直接提交檔案"; } }; /* //拖拽後點擊按鈕上傳 Dropzone.options.myAwesomeDropzone = { paramName : "userfile2", // 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(); } }, autoProcessQueue : false, init : function() { var submitButton = document.querySelector("#submit-all") myAwesomeDropzone = this; // closure submitButton.addEventListener("click", function() { myAwesomeDropzone.processQueue(); // Tell Dropzone to process all queued files. }); document.getElementById("divText").innerHTML = "拖拽檔案後請點選按鈕提交檔案"; } }; */ </SCRIPT> <BODY> ------------------------------------<br> <!-- 拖拽上傳 --> <span class="ts">拖拽上傳：</span><br><br> <form action="FileAction.do" class="dropzone" id="myAwesomeDropzone"> <input type="button" name="submit" value="提交" id="submit-all" class="btn" /> </form> <div id="divText" style="color:red"></div><br> ------------------------------------<br> <br> <!-- 普通上傳 --> <span class="ts">普通上傳：</span><br><br> <form method="post" action="FileAction.do" enctype="multipart/form-data" id="form1"> <input type="file" id="f2" name="userfile" > <br> <input type="text" name="ta" value="文字引數" /> <br> <input type="submit" name="submit" class="btn"> </form> <div id="divText" style="color:red">普通檔案上傳用作效果對比</div><br> ------------------------------------<br> </BODY> </HTML>
後臺就請大家自己實現試一下吧。
就像《三國演義》中呂布和趙雲沒有交過手一樣，Dropzone也有一點小遺憾。Dropzone對瀏覽器是有要求的，IE要10以上才支援，為之小嘆。