1. html文件
dropzone的原理是模擬表單來上傳文件，html中的元素有多重形式。
- 可以建立一個form表單：
<form id="dropz" action="/upload.php" enctype="multipart/form-data"> <input type="file" name="file"> </form> - 也可以不用表單的形式，直接用一個div
<div id="dropz"></div>
2.引入css文件
引入dropzone.min.css之后會有更漂亮的外觀；
然后可以自己添加些外觀樣式覆蓋它，如：
<style>
#filedropzone{
width: 900px;
height: 220px;
margin-left: 200px;
margin-top: 100px;
border: 3px dashed green;
border-radius: 2%;
box-shadow: 3px 3px 5px #888888;
}
</style>
3.js文件
必須配置js才能上傳
1.如果沒有引入jquery:
var myDropzone = new Dropzone("div#mydropzone", {url: "/upload"});
2.如果引入了jquery:
$("#dropz").dropzone({url: "/upload"})
常用的配置項：
- url : 必要參數，文件的上傳地址；
- maxFiles : 默認為null，可以指定為一個數值，限制最多文件數量。
- maxFilesize : 限制文件的大小，單位是MB；
- acceptedFiles : 允許上傳的文件類型，文件擴展名以逗號隔開，格式見實例；
- autoProcessQueue : 默認為true，即拖入文件立即自動上傳；如果需要在上傳之前有一些選擇的操作，然后手動上傳，可以把該屬性設置為false，然后手動點擊按鈕上傳；
- paramName : 相當於
<input>元素的name屬性，默認為file。
提示文本：
- dictDefaultMessage : 沒有任何文件被添加時的提示文本；
- dictFallbackMessage：Fallback 情況下的提示文本。
- dictInvalidInputType：文件類型被拒絕時的提示文本。
- dictFileTooBig：文件大小過大時的提示文本。
- dictCancelUpload：取消上傳鏈接的文本。
- dictCancelUploadConfirmation：取消上傳確認信息的文本。
- dictRemoveFile：移除文件鏈接的文本。
- dictMaxFilesExceeded：超過最大文件數量的提示文本。
添加監聽事件：
$("#dropz").dropzone({
init: function() {
this.on("addedfile", function(file) {
// actions...
});
}
});
沒有添加jquery時：
dropz.on("addedfile", function(file) {
// actions...
});
常用事件：
- addedfile : 添加文件是發生
- removefile : 手動從服務器刪除文件時發生
- success : 上傳成功后發生
- complete：當文件上傳成功或失敗之后發生。
- canceled：當文件在上傳時被取消的時候發生。
- maxfilesreached：當文件數量達到最大時發生。
- maxfilesexceeded：當文件數量超過限制時發生。
- totaluploadprogress : 文件上傳中的返回值，第一個參數為總上傳進度(0到100)，第二個為總字節數，第三個為總上傳字節數，利用這幾個參數，可計算出上傳速度，和剩余上傳時間；
html文件demo
<link rel="stylesheet" href="/static/plugins/dropzone/dropzone.css">
<div id="upload_div">
<p>請上傳您的代碼（如包含文件夾需要打包后再上傳）</p>
<form id="filedropzone" method="post" action="/upload" class="dropzone dz-clickable" >
<div class="dz-default dz-message">
<div class="dz-icon icon-wrap icon-circle icon-wrap-md">
<i class="fa fa-cloud-upload fa-3x"></i>
</div>
<div>
<p class="dz-text">把打包后的代碼拖放到這里</p>
<p class="text-muted">最多可上傳2張照片</p>
</div>
</div>
</form>
</div>
<script src="/static/plugins/dropzone/dropzone.js"></script>
<script>
$(document).ready(function () {
Dropzone.options.filedropzone = {
url:"{{ request.path }}",
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB,
addRemoveLinks:true,
maxFiles:5,
uploadMultiple:true,
accept: function(file, done) {
if (! file.name.endsWith(".zip") ) {
alert("只能上傳.zip格式的壓縮包")
done("文件為上傳")
myDropzone.removeFile(file);
}
else { done(); }
}
};
Dropzone.autoDiscover = false;
myDropzone = new Dropzone("#filedropzone");
myDropzone.on("addedfile", function(file) {
/* Maybe display some more file information on your page */
});
myDropzone.on("success", function(file,response) {
/* Maybe display some more file information on your page */
console.log('filex upload done...', response);
} )
})
</script>
完整示例：
$("#dropz").dropzone({
url: "/files/uploading",
maxFiles: 1,
maxFilesize: 1024,
acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
autoProcessQueue: false,
paramName: "file",
dictDefaultMessage: "拖入需要上傳的文件",
init: function () {
var myDropzone = this, submitButton = document.querySelector("#qr"),
cancelButton = document.querySelector("#cancel");
myDropzone.on('addedfile', function (file) {
//添加上傳文件的過程，可再次彈出彈框，添加上傳文件的信息
});
myDropzone.on('sending', function (data, xhr, formData) {
//向后台發送該文件的參數
formData.append('watermark', jQuery('#info').val());
});
myDropzone.on('success', function (files, response) {
//文件上傳成功之后的操作
});
myDropzone.on('error', function (files, response) {
//文件上傳失敗后的操作
});
myDropzone.on('totaluploadprogress', function (progress, byte, bytes) {
//progress為進度百分比
$("#pro").text("上傳進度：" + parseInt(progress) + "%");
//計算上傳速度和剩余時間
var mm = 0;
var byte = 0;
var tt = setInterval(function () {
mm++;
var byte2 = bytes;
var remain;
var speed;
var byteKb = byte/1024;
var bytesKb = bytes/1024;
var byteMb = byte/1024/1024;
var bytesMb = bytes/1024/1024;
if(byteKb <= 1024){
speed = (parseFloat(byte2 - byte)/(1024)/mm).toFixed(2) + " KB/s";
remain = (byteKb - bytesKb)/parseFloat(speed);
}else{
speed = (parseFloat(byte2 - byte)/(1024*1024)/mm).toFixed(2) + " MB/s";
remain = (byteMb - bytesMb)/parseFloat(speed);
}
$("#dropz #speed").text("上傳速率：" + speed);
$("#dropz #time").text("剩余時間"+arrive_timer_format(parseInt(remain)));
if(bytes >= byte){
clearInterval(tt);
if(byteKb <= 1024){
$("#dropz #speed").text("上傳速率：0 KB/s");
}else{
$("#dropz #speed").text("上傳速率：0 MB/s");
}
$("#dropz #time").text("剩余時間：0:00:00");
}
},1000);
});
submitButton.addEventListener('click', function () {
//點擊上傳文件
myDropzone.processQueue();
});
cancelButton.addEventListener('click', function () {
//取消上傳
myDropzone.removeAllFiles();
});
}
});
//剩余時間格式轉換：
function arrive_timer_format(s) {
var t;
if(s > -1){
var hour = Math.floor(s/3600);
var min = Math.floor(s/60) % 60;
var sec = s % 60;
var day = parseInt(hour / 24);
if (day > 0) {
hour = hour - 24 * day;
t = day + "day " + hour + ":";
}
else t = hour + ":";
if(min < 10){t += "0";}
t += min + ":";
if(sec < 10){t += "0";}
t += sec;
}
return t;
}
#urls.py
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^test/', views.dropzoneTest),
]
#views.py
from django.shortcuts import render
def dropzoneTest(request):
if request.is_ajax():
file = request.FILES.get('file')
with open('file.jpg','wb') as f:
for line in file:
f.write(line)
return render(request,'dropzoneTest.html')
#dropzoneDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<link rel="stylesheet" href="{% static 'dropzone.css' %}">
<script src="{% static 'jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'dropzone.js' %}"></script>
</head>
<body>
<p>請上傳身份照正反面照片</p>
<form id="filedropzone" method="post" action="{{ request.path }}" class="dropzone dz-clickable" >{% csrf_token %}
<div class="dz-default dz-message">
<div class="dz-icon icon-wrap icon-circle icon-wrap-md">
<i class="fa fa-cloud-upload fa-3x"></i>
</div>
<div>
<p class="dz-text">把證件信息拖放到這里</p>
<p class="text-muted">最多可上傳2張照片</p>
</div>
</div>
</form>
<!--------------------------------------------------------------->
<script>
$(document).ready(function () {
$("#filedropzone").dropzone({
url: "{{ request.path }}",
maxFiles: 5,
maxFilesize: 1024,
acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
autoProcessQueue: false,
paramName: "file",
dictDefaultMessage: "拖入需要上傳的文件",
init: function () {
var myDropzone = this, submitButton = document.querySelector("#qr"),
cancelButton = document.querySelector("#cancel");
myDropzone.on('addedfile', function (file) {
//添加上傳文件的過程，可再次彈出彈框，添加上傳文件的信息
});
myDropzone.on('sending', function (data, xhr, formData) {
//向后台發送該文件的參數
formData.append('watermark', jQuery('#info').val());
});
myDropzone.on('success', function (files, response) {
//文件上傳成功之后的操作
});
myDropzone.on('error', function (files, response) {
//文件上傳失敗后的操作
});
myDropzone.on('totaluploadprogress', function (progress, byte, bytes) {
//progress為進度百分比
$("#pro").text("上傳進度：" + parseInt(progress) + "%");
//計算上傳速度和剩余時間
var mm = 0;
var byte = 0;
var tt = setInterval(function () {
mm++;
var byte2 = bytes;
var remain;
var speed;
var byteKb = byte / 1024;
var bytesKb = bytes / 1024;
var byteMb = byte / 1024 / 1024;
var bytesMb = bytes / 1024 / 1024;
if (byteKb <= 1024) {
speed = (parseFloat(byte2 - byte) / (1024) / mm).toFixed(2) + " KB/s";
remain = (byteKb - bytesKb) / parseFloat(speed);
} else {
speed = (parseFloat(byte2 - byte) / (1024 * 1024) / mm).toFixed(2) + " MB/s";
remain = (byteMb - bytesMb) / parseFloat(speed);
}
$("#dropz #speed").text("上傳速率：" + speed);
$("#dropz #time").text("剩余時間" + arrive_timer_format(parseInt(remain)));
if (bytes >= byte) {
clearInterval(tt);
if (byteKb <= 1024) {
$("#dropz #speed").text("上傳速率：0 KB/s");
} else {
$("#dropz #speed").text("上傳速率：0 MB/s");
}
$("#dropz #time").text("剩余時間：0:00:00");
}
}, 1000);
});
submitButton.addEventListener('click', function () {
//點擊上傳文件
myDropzone.processQueue();
});
cancelButton.addEventListener('click', function () {
//取消上傳
myDropzone.removeAllFiles();
});
}
});
//剩余時間格式轉換：
function arrive_timer_format(s) {
var t;
if (s > -1) {
var hour = Math.floor(s / 3600);
var min = Math.floor(s / 60) % 60;
var sec = s % 60;
var day = parseInt(hour / 24);
if (day > 0) {
hour = hour - 24 * day;
t = day + "day " + hour + ":";
}
else t = hour + ":";
if (min < 10) {
t += "0";
}
t += min + ":";
if (sec < 10) {
t += "0";
}
t += sec;
}
return t;
}
})
</script>
</body>
</html>