DropZone（文件上传插件）

1. html文件

dropzone的原理是模拟表单来上传文件，html中的元素有多重形式。

可以建立一个form表单：

<form id="dropz" action="/upload.php" enctype="multipart/form-data">

<input type="file" name="file">

</form>

也可以不用表单的形式，直接用一个div

1

<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:

1	`var myDropzone` `=` `new Dropzone("div#mydropzone", {url:` `"/upload"});`

2.如果引入了jquery:

1	`$("#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 filemaxFilesize: 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>

完整示例：

#urls.pyfrom app01 import viewsurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^test/', views.dropzoneTest),
]#views.pyfrom django.shortcuts import renderdef 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>

转载于:https://www.cnblogs.com/shuai1991/p/11072077.html