06: dorpzone上传下载
1.1 dropzone上传下载使用
参考博客：https://www.cnblogs.com/fu-yong/p/9053515.html
1、使用dropzone需要引入文件
<link rel="stylesheet" href="/static/dropzone/dropzone.css">
<script src="/static/dropzone/jquery-1.12.4.js"></script>
<script src="/static/dropzone/dropzone.js"></script>
2、我们可以自己写css覆盖dropzone.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、dropzone中引入或不引入jquery的写法
1、如果没有引入jquery:
var myDropzone = new Dropzone("div#mydropzone", {url: "/upload"});
2、如果引入了jquery:
$("#dropz").dropzone({url: "/upload"})
1.2 dropzone使用常用配置项
1、常用事件：
addedfile : 添加文件是发生
removefile : 手动从服务器删除文件时发生
success : 上传成功后发生
complete： 当文件上传成功或失败之后发生。
canceled： 当文件在上传时被取消的时候发生。
maxfilesreached： 当文件数量达到最大时发生。
maxfilesexceeded： 当文件数量超过限制时发生。
totaluploadprogress : 文件上传中的返回值，第一个参数为总上传进度(0到100)，第二个为总字节数，第三个为总上传字节数，利用这几个参数，可计算出上传速度，和剩余上传时间；
2、常用的配置项：
url : 必要参数，文件的上传地址；
maxFiles : 默认为null，可以指定为一个数值，限制最多文件数量。
maxFilesize : 限制文件的大小，单位是MB；
acceptedFiles : 允许上传的文件类型，文件扩展名以逗号隔开，格式见实例；
autoProcessQueue : 默认为true，即拖入文件立即自动上传；如果需要在上传之前有一些选择的操作，然后手动上传，可以把该属性设置为false，然后手动点击按钮上传；
paramName : 相当于<input>元素的name属性，默认为file。
3、提示文本：
dictDefaultMessage : 没有任何文件被添加时的提示文本；
dictFallbackMessage： Fallback 情况下的提示文本。
dictInvalidInputType： 文件类型被拒绝时的提示文本。
dictFileTooBig： 文件大小过大时的提示文本。
dictCancelUpload： 取消上传链接的文本。
dictCancelUploadConfirmation： 取消上传确认信息的文本。
dictRemoveFile： 移除文件链接的文本。
dictMaxFilesExceeded： 超过最大文件数量的提示文本。
4、dropzone 基本事例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/dropzone/dropzone.css">
<script src="/static/dropzone/jquery-1.12.4.js"></script>
<script src="/static/dropzone/dropzone.js"></script>
</head>
<body>
<p style="font-weight: bold">上传附件</p>
<form id="filedropzone" method="post" action="" 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">最多可上传十个附件</p>
</div>
</div>
<input type="button" id="qr" value="上传">
<input type="button" id="cancel" value="取消">
</form> <div id="upload-div" style="margin-top: 20px"> </div>
<script>
//Dropzone Configuration
Dropzone.autoDiscover = false;
$(document).ready(function () {
$("#filedropzone").dropzone({
url: '/workflow/workorder/upfile/',
maxFiles: 10, // 总共可以上传文件最大个数
maxFilesize: 200, // 上传文件最大 Mb
acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
autoProcessQueue: false,
paramName: "file",
dictDefaultMessage: "拖入需要上传的文件",
parallelUploads: 10, // 点击上传，一次上次最大个数
dictFileTooBig:"文件过大上传文件最大支持.",
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) {
//文件上传成功之后的操作
{# console.log('filex upload done...', response);#}
upfile_sucess(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;
}
}); function upfile_sucess(files, response) {
response = JSON.parse(response);
var up_filename = response.up_filename;
var filepath = response.filepath; // 创建div
var file_div = document.createElement('div');
file_div.className = "form-group has-success has-feedback";
// 创建input
var input = document.createElement('input');
input.className = "form-control up-file";
input.setAttribute("value",up_filename);
input.setAttribute("filepath",filepath);
input.setAttribute('disabled','disabled');
// 创建span
var span = document.createElement('span');
span.className = "glyphicon glyphicon-ok form-control-feedback";
file_div.appendChild(input);
file_div.appendChild(span); document.getElementById('upload-div').appendChild(file_div); }
</script>
</body>
</html>
upload.html
1.3 dropzone结合django实现多文件上传下载
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
) UPLOAD_ANNEX_PATH = os.path.join(BASE_DIR, "upload/")
settings.py
from app01 import views urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^upload/', views.upload_file),
url(r'^download/', views.download_file),
]
urls.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals from django.shortcuts import render,HttpResponse
from django.http.response import StreamingHttpResponse
import uuid,json
from updown_load.settings import UPLOAD_ANNEX_PATH def upload_file(request):
if request.method == 'POST':
filelist = request.FILES.getlist('file')
data = {}
if filelist:
filelist = request.FILES.getlist('file')
for upfile in filelist:
up_filename = upfile.name
store_filename = str(uuid.uuid1()) + '.' + up_filename.split('.')[-1]
filepath = UPLOAD_ANNEX_PATH + store_filename
with open(filepath, 'wb') as f:
for item in upfile.chunks():
f.write(item)
data = {'up_filename':up_filename,'filepath':filepath}
print json.dumps(data)
return HttpResponse(json.dumps(data) )
return render(request, 'upload.html') def download_file(request):
file_path = request.GET.get('file_path')
name = request.GET.get('up_filename')
def file_iterator(file_path, chunk_size=512):
with open(file_path, 'rb') as f:
while True:
c = f.read(chunk_size)
if c:
yield c
else:
break
response = StreamingHttpResponse(file_iterator(file_path))
response['Content-Type'] = 'application/octet-stream'
response['Content-Disposition'] = 'attachment;filename="{0}"'.format(name.encode('utf-8').decode('ISO-8859-1'))
return response
views.py
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/dropzone/dropzone.css">
<link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
<script src="/static/dropzone/jquery-1.12.4.js"></script>
<script src="/static/dropzone/dropzone.js"></script>
</head>
<body>
<p style="font-weight: bold">上传附件</p>
<form id="filedropzone" method="post" action="" 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">最多可上传十个附件</p>
</div>
</div>
<input type="button" id="qr" value="上传">
<input type="button" id="cancel" value="取消">
</form> <div id="upload-div" style="margin-top: 20px"> </div> <!-- 模拟下载 -->
<div>
<div class="timeline-item">
<h3 class="timeline-header"><a>附件下载</a></h3>
<h3 class="timeline-header">
<a href="/download/?file_path=C:\\Users\\tom\\Desktop\\updown_load\\upload/00ef26ae-bd4b-11e8-80a6-d481d7cf000f.jpg&up_filename=4.jpg" class="download-file">
附件1下载: </a>
<span> 4.jpg</span>
</h3>
</div> </div> <script>
//Dropzone Configuration
Dropzone.autoDiscover = false;
$(document).ready(function () {
$("#filedropzone").dropzone({
url: '/upload/',
maxFiles: 10, // 总共可以上传文件最大个数
maxFilesize: 200, // 上传文件最大 Mb
acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
autoProcessQueue: false,
paramName: "file",
dictDefaultMessage: "拖入需要上传的文件",
parallelUploads: 10, // 点击上传，一次上次最大个数
dictFileTooBig:"文件过大上传文件最大支持.",
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) {
//文件上传成功之后的操作
{# console.log('filex upload done...', response);#}
upfile_sucess(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;
}
}); function upfile_sucess(files, response) {
response = JSON.parse(response);
var up_filename = response.up_filename;
var filepath = response.filepath; // 创建div
var file_div = document.createElement('div');
file_div.className = "form-group has-success has-feedback";
// 创建input
var input = document.createElement('input');
input.className = "form-control up-file";
input.setAttribute("value",up_filename);
input.setAttribute("filepath",filepath);
input.setAttribute('disabled','disabled');
// 创建span
var span = document.createElement('span');
span.className = "glyphicon glyphicon-ok form-control-feedback";
file_div.appendChild(input);
file_div.appendChild(span); document.getElementById('upload-div').appendChild(file_div); }
</script>
</body>
</html>
upload.html
06: dorpzone上传下载的更多相关文章
- Webwork 学习之路【07】文件上传下载
Web上传和下载应该是很普遍的一个需求,无论是小型网站还是大并发访问的交易网站.WebWork 当然也提供了很友好的拦截器来实现对文件的上传,让我们可以专注与业务逻辑的设计和实现,在实现上传和下载时顺 ...
- 高可用的Spring FTP上传下载工具类（已解决上传过程常见问题）
前言 最近在项目中需要和ftp服务器进行交互,在网上找了一下关于ftp上传下载的工具类,大致有两种. 第一种是单例模式的类. 第二种是另外定义一个Service,直接通过Service来实现ftp的上 ...
- Xshell5下利用sftp上传下载传输文件
sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.sftp 与 ftp 有着几乎一样的语法和功能.SFTP 为 SSH ...
- Java.ftp上传下载
1:jar的maven的引用: 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...
- Webwork【07】文件上传下载
Web上传和下载应该是很普遍的一个需求,无论是小型网站还是大并发访问的交易网站.WebWork 当然也提供了很友好的拦截器来实现对文件的上传,让我们可以专注与业务逻辑的设计和实现,在实现上传和下载时顺 ...
- Struts的文件上传下载
Struts的文件上传下载 1.文件上传 Struts2的文件上传也是使用fileUpload的组件,这个组默认是集合在框架里面的.且是使用拦截器:<interceptor name=" ...
- 基于Spring Mvc实现的Excel文件上传下载
最近工作遇到一个需求,需要下载excel模板,编辑后上传解析存储到数据库.因此为了更好的理解公司框架,我就自己先用spring mvc实现了一个样例. 基础框架 之前曾经介绍过一个最简单的spring ...
- Android okHttp网络请求之文件上传下载
前言: 前面介绍了基于okHttp的get.post基本使用(http://www.cnblogs.com/whoislcj/p/5526431.html),今天来实现一下基于okHttp的文件上传. ...
- 用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具
直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区 ...
随机推荐
- hibernate.validator.constraints.NotEmpty校验请求参数报错java.lang.NoClassDefFoundError: javax/el/PropertyNotFoundException
spring maven项目,使用hibernate validator 注解形式校验客户端的请求参数. hibernate-validator版本:5.0.2.Final validation-ap ...
- 解决乱码的方法是，在执行SQL语句之前，将MySQL以下三个系统参数设置为与服务器字符集character-set-server相同的字符集
character-set-server/default-character-set:服务器字符集,默认情况下所采用的. character-set-database:数据库字符集. characte ...
- python中的lxml模块
Python中自带了XML的模块,但是性能不太好,相比之下,LXML增加了很多实用的功能. lxml中主要有两部分, 1) etree,主要可以用来解析XML字符串, 内部有两个对象,etree._E ...
- dp入门 石子相邻合并 详细带图讲解
题目: 有N堆石子,现要将石子有序的合并成一堆,规定如下: 1.每次只能移动相邻的2堆石子合并 2.合并花费为新合成的一堆石子的数量. 求将这N堆石子合并成一堆的总花费最小(或最大). 样例: 输入 ...
- 学习笔记<4>初步控件布局
一.控件布局基本概念 指控制控件在Activity当中的位置.大小.颜色以及其他控件样式属性 二.控件布局两种方法 1.使用布局文件完成控件布局(eclipse可视化拖拽控件实现) 2.在JAVA代码 ...
- 多线程实现Thread.Start()与ThreadPool.QueueUserWorkItem两种方式对比
Thread.Start(),ThreadPool.QueueUserWorkItem都是在实现多线程并行编程时常用的方法.两种方式有何异同点,而又该如何取舍? 写一个Demo,分别用两种方式实现.观 ...
- 实战http切换成https
Server端使用Nginx + Tomcat Niginx SSL on Tomcat SSL non 步骤: 1.修改代码,将外部引用的http js css 文件修改为https,若外部链接不支 ...
- django2.0 路由规则
Django2.0中URL的路由机制 路由是关联url及其处理函数关系的过程.Django的url路由配置在settings.py文件中ROOT_URLCONF变量指定全局路由文件名称. Django ...
- grouping sets 的使用
grouping sets 可以用于在计算分组聚合函数值的同时计算合计值 -- 查询结果group_id为NULL的那一行即为合计值 select group_id , count(distinct ...
- golang学习笔记17 爬虫技术路线图，python，java，nodejs，go语言，scrapy主流框架介绍
golang学习笔记17 爬虫技术路线图,python,java,nodejs,go语言,scrapy主流框架介绍 go语言爬虫框架:gocolly/colly,goquery,colly,chrom ...