django + dropzone.js 上传文件
1、dropzone.js
http://www.dropzonejs.com/
dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具
2、dropzone.js前端界面上传方式
官网下载 并且引入dropzone.js 和dropzone.css(http://www.dropzonejs.com/)以及引用jquery.js
,定义一个class="dropzone"即可完成,
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask upload with Dropzone example</title>
<link rel="stylesheet" href="/static/css/dropzone.css" type="text/css" />
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/js/dropzone.js"></script>
</head> <body> 方法1:
<form id ="myAwesomeDropzone" action="{{ request.path }}" class="dropzone" method="POST" enctype="multipart/form-data"></form>
//这段代码是展示dropzone.js的精髓,class一定要是dropzone,id可以自定义
<script type="text/javascript">
//第二种配置,这种使用的是div做上传区域时使用的配置
Dropzone.autoDiscover = false;//不知道该行有什么用,欢迎高手下方评论解答
$("#myAwesomeDropzone").dropzone({
url: "{{ request.path }}",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024
});
</script>
方法2:
<div class="form-group">
<label class="title">真人照(最多只能传一张)</label>
<div id="dropz" class="dropzone"></div>//这段代码是展示dropzone.js的精髓,class一定要是dropzone,id可以自定义
</div>
<input type="hidden" name="file_id" ng-model="file_id" id="file_id"/> <script type="text/javascript">
var appElement = document.querySelector('div .inmodal');
var myDropzone = new Dropzone("#dropz", {
url: "{{ request.path }}",//文件提交地址
method:"post", //也可用put
paramName:"file", //默认为file
maxFiles:1,//一次性上传的文件数量上限
maxFilesize: 2, //文件大小,单位:MB
acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
addRemoveLinks:true,
parallelUploads: 1,//一次上传的文件数量
//previewsContainer:"#preview",//上传图片的预览窗口
dictDefaultMessage:'拖动文件至此或者点击上传',
dictMaxFilesExceeded: "您最多只能上传1个文件!",
dictResponseError: '文件上传失败!',
dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
dictFallbackMessage:"浏览器不受支持",
dictFileTooBig:"文件过大上传文件最大支持.",
dictRemoveLinks: "删除",
dictCancelUpload: "取消",
//对一些方法的后续处理
init:function(){
this.on("addedfile", function(file) {
//上传文件时触发的事件
document.querySelector('div .dz-default').style.display = 'none';
});
this.on("success",function(file,data){
alert(data.data)
//上传成功触发的事件
console.log('ok');
});
this.on("error",function (file,data) {
//上传失败触发的事件
console.log('fail');
var message = '';
//lavarel框架有一个表单验证,
//对于ajax请求,JSON 响应会发送一个 422 HTTP 状态码,
//对应file.accepted的值是false,在这里捕捉表单验证的错误提示
if (file.accepted){
$.each(data,function (key,val) {
message = message + val[0] + ';';
})
//控制器层面的错误提示,file.accepted = true的时候;
alert(message);
}
});
this.on("removedfile",function(file){
//删除文件时触发的方法(向后台发送删除文件请求)
{# $.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {#}
{# console.log('删除结果:'+data.message);#}
{# })#} document.querySelector('div .dz-default').style.display = 'block';
});
}
});
</script>
</body>
</html> 方法二中,很多参数是不一定需要定义的,参见方法一 3、后台处理dropzone.js前端界面上传的文件
A、django的settings.py 文件定义上传文件夹:
#文件上传文件夹定义
ENROLLED_DATA = '%s/statics/enrolled_data' %BASE_DIR B、对应的view处理前端上传过来的数据:
from django.views.decorators.csrf import csrf_exempt
from PerfectCRM.settings import *
import os
@csrf_exempt
def upload(request):
if request.method =='POST': #post方式
if request.is_ajax(): #如果是ajax请求
if not os.path.exists(ENROLLED_DATA): #如果settings定义的 上传文件夹不存在
os.makedirs(ENROLLED_DATA,exist_ok=True) #新建文件夹
for k,file_obj in request.FILES.items(): #获取前端传过来的文件数据
with open('%s/%s'%(ENROLLED_DATA,file_obj.name),"wb") as f: #打开文件
for chunk in file_obj.chunks():
f.write(chunk) #chunk方式写入文件
return render(request, 'dropzone-back.html') C、上传成功:
django + dropzone.js 上传文件的更多相关文章
- 使用ajaxfileupload.js上传文件
一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...
- js 上传文件后缀名的判断 var flag=false;应用
js 上传文件后缀名的判断 var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- django实现分片上传文件
目标:利用django实现上传文件功能 1,先设置路由系统 urls.py from django.conf.urls import url,include from django.contrib i ...
- Django之用户上传文件的参数配置
Django之用户上传文件的参数配置 models.py文件 class Xxoo(models.Model): title = models.CharField(max_length=128) # ...
- js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中
ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- Django session cookie 上传文件、详解
session 在这里先说session 配置URL from django.conf.urls import patterns, include, url from django.contrib i ...
- 前端js上传文件 到后端接收文件
下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...
- 纯js上传文件 很好用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- ai学习记录
界面:多个预编辑区:制作图形,使用的图形放到工作区内,不使用在预编区.没有Ctrl/Alt+delete的概念,没有前后景颜色.新建:分辨率:矢量软件和分辨率无关: 新建时候不要勾选对齐到像素网格 存 ...
- Java操作Redis存储对象类型数据
背景描述 关于JAVA去操作Redis时,如何存储一个对象的数据,大家是非常关心的问题,虽然官方提供了存储String,List,Set等等类型,但并不满足我们现在实际应用.存储一个对象是是 ...
- 【BZOJ 2324】[ZJOI2011]营救皮卡丘 费用流
本人实行诱骗拐卖(利用自然分层与实际意义),正解拼接补充(充分利用最大流限制(不浪费任何一个走出去的机会而不是不浪费任何一个已有的流)与问题转换) #include <cstdio> #i ...
- MySQL使用笔记(二)数据库基本操作
By francis_hao Dec 11,2016 数据库是什么 数据库是什么呢?对于MySQL来说,数据库是存储数据库对象的容器,参考[1]中的简单解释是:数据库是一个拥有特定排放顺序的文件 ...
- javaScript获取文档中所有元素节点的个数
HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 转:极小极大搜索方法、负值最大算法和Alpha-Beta搜索方法
转自:极小极大搜索方法.负值最大算法和Alpha-Beta搜索方法 1. 极小极大搜索方法 一般应用在博弈搜索中,比如:围棋,五子棋,象棋等.结果有三种可能:胜利.失败和平局.暴力搜索,如果想通 ...
- maven在add dependecy时搜索不出jar包的解决办法
一:前言 其实我一直都很头疼maven的项目管理的,因为觉得用起来还是没有那么方便的啊,不过今天我自己算是小弄了下maven项目的故那里,是一个同事在配置maven的项目,我去凑了下热闹而已,现在自己 ...
- c#之字符串函数
1.常用的字符串函数 Compare 比较字符串的内容,考虑文化背景(场所),确定某些字符是否相等 int Compare(string str1,string str2) int Compare(s ...
- 浏览器web端详解
一.背景介绍浏览器是前端工程师或页面重构师工作中必不可少的,WEB页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验,特别是浏览器渲染页面的原理,页面渲染就是浏览器将HTML ...
- HDU 4320 Arcane Numbers 1 (数论)
A - Arcane Numbers 1 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64 ...