说明：后台用的python的flask框架，后台对你理解这篇文章没什么影响，你可以使用php
form作为上传区
引入Dropzone.js和dropzone.css然后使用表单form定义一个class=”dropzone”即可完成
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flask upload with Dropzone example</title> <link href="{{ url_for('static', filename='dropzone.css') }}" type="text/css" /> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> </head> <body> <!-- 第一种上传 --> <form id ="myAwesomeDropzone" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data"></form> <!-- 第一种上传 --> </body> </html>
效果
div作为上传区
div作为上传区也很简单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flask upload with Dropzone example</title> <link href="{{ url_for('static', filename='dropzone.css') }}" type="text/css" /> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> </head> <body> <div>点我上传</div> <script type="text/javascript"> //下面两行是js和jquery的方式实现绑定div的例子，你选择一种即可 //var myDropzone = new Dropzone("#myId", { url: "{{ url_for('upload_file') }}" }); $("#myId").dropzone({ url: "{{ url_for('upload_file') }}" }); </script> </body> </html>
效果
form作为上传区配置
配置也分为两种，如果使用的form表单上传的就用如下方式配置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flask upload with Dropzone example</title> <link href="{{ url_for('static', filename='dropzone.css') }}" type="text/css" /> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> </head> <body> <form id ="myAwesomeDropzone" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data"> <div> <input type="file" multiple /> </div> </form> <script type="text/javascript"> //两种配置方式，第一种，表单上传时的配置方式，可以打开form表单的注释，myAwesomeDropzone是表单的id 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(); } } }; </script> </body> </html>
效果
div作为上传区配置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flask upload with Dropzone example</title> <link href="{{ url_for('static', filename='dropzone.css') }}" type="text/css" /> <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> </head> <body> <div>点我上传</div> <script type="text/javascript"> //第二种配置，这种使用的是div做上传区域时使用的配置 Dropzone.autoDiscover = false;//不知道该行有什么用，欢迎高手下方评论解答 $("#myId").dropzone({ url: "{{ url_for('upload_file') }}", addRemoveLinks: true, method: 'post', filesizeBase: 1024 }); </script> </body> </html>
说明：关于其他的配置请看最后的链接
主题
第一种
<!DOCTYPE html> <html> <head> <meta charset=="utf-8"> <!-- Latest compiled and minified CSS --> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" > <!-- Optional theme --> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" > <script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='dropzone.js') }}"></script> <script> Dropzone.autoDiscover = false; </script> <style> html, body { height: 100%; } #actions { margin: 2em 0; } /* Mimic table appearance */ div.table { display: table; } div.table .file-row { display: table-row; } div.table .file-row > div { display: table-cell; vertical-align: top; border-top: 1px solid #ddd; padding: 8px; } div.table .file-row:nth-child(odd) { background: #f9f9f9; } /* The total progress gets shown by event listeners */ #total-progress { opacity: 0; transition: opacity 0.3s linear; } /* Hide the progress bar when finished */ #previews .file-row.dz-success .progress { opacity: 0; transition: opacity 0.3s linear; } /* Hide the delete button initially */ #previews .file-row .delete { display: none; } /* Hide the start and cancel buttons and show the delete button */ #previews .file-row.dz-success .start, #previews .file-row.dz-success .cancel { display: none; } #previews .file-row.dz-success .delete { display: block; } </style> </head> <body> <div> <h2>Configuration Demo</h2> <div> <div> <!-- 控制总体的三个按钮 --> <span> <i></i> <span>Add files...</span> </span> <button type="submit"> <i></i> <span>Start upload</span> </button> <button type="reset"> <i></i> <span>Cancel upload</span> </button> </div> <div> <!-- 总体的进度 --> <span> <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> <div data-dz-uploadprogress></div> </div> </span> </div> </div> <!-- data-dz-thumbnail：使用后代表该标签是存放缩略图的标签【这里必须是一个 <img /> 元素 ，并且alt 和 src 属性将被 Dropzone改变】 data-dz-name：存放文件名 data-dz-errormessage：存放错误信息 data-dz-size：存放文件大小 data-dz-remove ：删除队列中的文件，或者取消正在从队列上传到服务器的文件 data-dz-uploadprogress：上传进度【( 当这里有一个 uploadprogress事件时， Dropzone 将更改 style.width 属性从 0% 到 100% )】 --> <div> <div> <div> <span><img data-dz-thumbnail /></span> </div> <div> <p data-dz-name ></p> <strong data-dz-errormessage></strong> </div> <div> <p data-dz-size></p> <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> <div data-dz-uploadprogress></div> </div> </div> <div> <button> <i></i> <span>Start</span> </button> <button data-dz-remove> <i></i> <span>Cancel</span> </button> <button data-dz-remove> <i></i> <span>Delete</span> </button> </div> </div> </div> <script> // Get the template HTML and remove it from the doument var previewNode = document.querySelector("#template"); previewNode.id = ""; var previewTemplate = previewNode.parentNode.innerHTML; //开始先删除单个文件的布局 previewNode.parentNode.removeChild(previewNode); var myDropzone = new Dropzone(document.body, { // 指定拖拽区为body url: "{{ url_for('upload_file') }}", // Set the url thumbnailWidth: 80, thumbnailHeight: 80, parallelUploads: 20, previewTemplate: previewTemplate, autoQueue: false, // 当队列有文件，是否立刻自动上传到服务器 previewsContainer: "#previews", // 指定存放文件队列区 clickable: ".fileinput-button" // 点击某个按钮或区域后出现选择电脑中本地图片，默认是previewsContainer指定的区域 }); myDropzone.on("addedfile", function(file) { // 让模版中的单个文件可以点击上传 file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); }; }); // 显示所有文件整体上传进度1-100 myDropzone.on("totaluploadprogress", function(progress) { document.querySelector("#total-progress .progress-bar").style.width = progress + "%"; }); myDropzone.on("sending", function(file) { // 显示整体的上传的进度条，说明：原来是0，所以上面的style.width = progress + "%"即使是100%也看不到 document.querySelector("#total-progress").style.opacity = "1"; // 失效上传按钮 file.previewElement.querySelector(".start").setAttribute("disabled", "disabled"); }); // 当没有文件上传时，隐藏进度条 myDropzone.on("queuecomplete", function(progress) { document.querySelector("#total-progress").style.opacity = "0"; }); // 上传所有 document.querySelector("#actions .start").onclick = function() { myDropzone.enqueueFiles(myDropzone.getAcceptedFiles()); //myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));与上面一样，可查看源码对比 }; //取消所有 document.querySelector("#actions .cancel").onclick = function() { myDropzone.removeAllFiles(true); }; </script> </body> </html>
第二种效果与默认的一样