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. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区 ...
随机推荐
- [转]记解决一次“HTTP Error 400. The request URL is invalid”的错误
今天将图片服务切到使用了cdn的机器上面去,然后就部分图片报如下图错误“HTTP Error 400. The request URL is invalid” 看到这种错误信息,一般的开发者心中可能会 ...
- tomcat优化和JVM修改内存
Tomcat中的线程池(APR和ThreadPool) 2. 在Connector中指定使用共享线程池: <Connector executor="tomcatThreadPool&q ...
- vue中打印显示++的问题解决方案（做成类似同步的操作就行了）
这个问题,困扰我很久很久 怎么实现的呢?首先进入页面就开始调取打印接口,打印接口的成功回调函数里面写 this.hasOut++(这是实时显示的数量)this.width=(this.hasOut/t ...
- end to end
深度学习中的end to end是什么意思? 端到端就是输入一个数据进入模型,然后模型直接可以输出你想要的结果,也就是一体性. 简单讲就是,Input--->系统(这里指神经网络)---> ...
- Nuxtjs初始
今天去看vue的官网,才看了他的升级版-->Nuxtjs,https://nuxtjs.org/guide/installation可以点击链接进入他的官网查看文档 第一步,搭建项目之前的准备工 ...
- Spring框架第一天
## 今天课程:Spring框架第一天 ## ---------- **Spring框架的学习路线** 1. Spring第一天:Spring的IOC容器之XML的方式,Spring框架与Web项目整 ...
- java中，null值可以被强制转换为任何类型
java中,null值可以被强制转换为任何类型
- Springboot的异步线程池
1:定义线程池 @EnableAsync @Configuration class TaskPoolConfig { @Bean("taskExecutor") public Ex ...
- 20180309 - C# demo - 1
using System; namespace HelloWorldApplication { class HelloWorld { static void Main(string[] args) { ...
- python windows 下pip easy_install 使用错误的问题
最近电脑重装了系统,又重新安装python .在官网下载了安装包后电脑成功安装了,但使用pip命令时出现以下错误 Fatal error in launcher: Unable to create p ...