django文件——django + jquery-file-upload上传篇(二)-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示
1.model.py
class Fujian(models.Model):name = models.CharField(max_length=32,verbose_name="附件名称")file = models.FileField(upload_to="upload/%Y/%m/%d/")uploaded_at = models.DateTimeField(auto_now_add=True)def __str__(self):return self.name
2.forms.py
class FujianForm(forms.ModelForm):class Meta:model = Fujianfields = ('file',)
3.views.py
def fujian_add(request):if request.method == 'POST':form = FujianForm(request.POST,request.FILES)if form.is_valid():fujian = form.save()data = {'is_valid':True,'name':fujian.file.name,'url':fujian.file.url}else:data = {'is_valid':False}return JsonResponse(data)if request.method == 'GET':return render(request,"fujian_add.html")
4.fujian_add.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>附件上传</title><link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"><script src="/static/js/jquery.min.js"></script><script src="/static/js/jquery-ui.min.js"></script><script src="/static/bootstrap/js/bootstrap.js"></script><script src="/static/jquery-file-upload/vendor/jquery.ui.widget.js"></script><script src="/static/jquery-file-upload/jquery.iframe-transport.js"></script><script src="/static/jquery-file-upload/jquery.fileupload.js"></script><script src="/static/js/base.js"></script> </head> <body> <div class="container"><h1>图片上传</h1><form method="post" action="">{% csrf_token %}<input type="hidden" name="next" value="{{ request.path }}"><button type="submit" class="btn btn-danger pull-right"><span class="glyphicon glyphicon-trash"></span> 清空数据</button></form><div><div style="margin-bottom: 20px;">{# 1. 添加附件的按钮 #}<button type="button" class="btn btn-primary js-upload-photos"><span class="glyphicon glyphicon-cloud-upload"></span> 上传附件</button>{# 2. 上传图片的插件 #}<input id="fileupload" type="file" name="file" multiplestyle="display: none;"data-url="/fujian/add/"data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'></div>{# 3. 显示上传的文件 #}<table id="gallery" class="table table-bordered"><thead><tr><th>Photo</th></tr></thead><tbody></tbody></table></div> </div><!--进度条模态框--><div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Uploading...</h4></div><div class="modal-body"><div class="progress"><div class="progress-bar" role="progressbar" style="width: 0%;">0%</div></div></div></div></div></div>
</body> </html>
页面效果:
5.需要引入jquery-file-upload的js文件
<linkrel="stylesheet"href="/static/bootstrap/css/bootstrap.css">
<scriptsrc="/static/js/jquery.min.js"></script>
<scriptsrc="/static/js/jquery-ui.min.js"></script>
<scriptsrc="/static/bootstrap/js/bootstrap.js"></script>
<scriptsrc="/static/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
<scriptsrc="/static/jquery-file-upload/jquery.iframe-transport.js"></script>
<scriptsrc="/static/jquery-file-upload/jquery.fileupload.js"></script>
<scriptsrc="/static/js/progress-bar-upload.js"></script>
6.urls.py文件
from app01 import views
urlpatterns = [url(r'^admin/', admin.site.urls),url(r'^fujian/add/$', views.fujian_add),
]
7.progress-bar-upload.js
$(function() {$(".js-upload-photos").click(function() {$("#fileupload").click();});$("#fileupload").fileupload({dataType:'json',sequentialUploads:true, /*1. SEND THE FILES ONE BY ONE 这个属性指示该组件一次发送一个文件*/start:function (e) { /*2. WHEN THE UPLOADING PROCESS STARTS, SHOW THE MODAL*/$("#modal-progress").modal("show");},stop:function (e) { /*3. WHEN THE UPLOADING PROCESS FINALIZE, HIDE THE MODAL*/$("#modal-progress").modal("hide");},progressall:function (e, data) { /*4. UPDATE THE PROGRESS BAR*/var progress = parseInt(data.loaded / data.total * 100, 10);var strProgress = progress + "%";$(".progress-bar").css({"width": strProgress});$(".progress-bar").text(strProgress);},done:function(e, data) {if(data.result.is_valid) {$("#gallery tbody").prepend("<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>")}}});
});
效果:
拖入文件上传:
在fujian_add.html下面加上以下代码:
<divclass="well text-muted text-center"style="padding-top: 4rem; padding-bottom: 4rem;"><spanclass="glyphicon glyphicon-arrow-down"style="font-size: 4rem;"></span><h3>拖入文件上传</h3></div>
效果:
转载于:https://www.cnblogs.com/pyghost/p/10832452.html
django文件——django + jquery-file-upload上传篇(二)-- 插件实现文件上传+进度条显示 +拖入文件上传...相关推荐
- java进度条_Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)...
先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验 从服务器上压缩下载: 从 ...
- 360安全浏览器禁止拖入文件解决方法
360安全浏览器/360急速浏览器不可以拖入文件解决方法 摘要:360安全浏览器/360急速浏览器禁止文件拖入浏览器进行打开.上传等操作的问题,按以下步骤1.2操作完即可解决(也适用于其他浏览器): ...
- php上传漏洞绕过gd库,jQuery File Upload任意文件上传漏洞
事件背景 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个JavaScript代码库(或JavaScript框架).jQuery File Upload一个jQ ...
- 定制jQuery File Upload为微博式单文件上传
原文链接:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload jQuery File Upload是一个 ...
- jQuery File Upload文件上传
最近在写单文件上传,用jQuery File Upload踩了好多坑,但终于实现了单文件,通过按钮提交. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
- jquery PHP大文件上传,Jquery和BigFileUpload实现大文件上传及进度条显示
实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, ...
- jQuery File Upload
jQuery File Upload的最简模型 jQuery File Upload包含了一堆文件,首先需要弄清楚的是最核心的部分是哪些,根据官方的例子可以知道,一个最简单的jQuery File U ...
- jquery file upload ajax上传图片 简单使用
为什么80%的码农都做不了架构师?>>> 最近要在做后台的图片上传,要用ajax异步上传图片,原生js实现很难 jquery file upload 插件很轻松就完成了 < ...
- jquery file upload 后台收到的文件名中文乱码, filename中文乱码
在jQuery File Upload.js文件里,在以下这个js中有个成员叫做 _initXHRData, 是一个function, 在这个function的最后部分有一个if-else分支,如下: ...
最新文章
- ArcGIS API for JavaScript4.x 之加载2D、3D地图
- pytorch 函数clamp
- logstash mysql日期_logstash-input-jdbc取mysql数据日期格式处理
- 毕业一年,疫情之下的95后工作:有的退而求次,有的忐忑前行
- python在匿名函数作和_跟光磊学Python开发-匿名函数函数和高阶函数
- 第六十四期:微软将不再把 .NET Framework API 移植到 .NET Core 3.0
- 腾讯视频怎样关闭推送迷你页面
- org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.TooManyR
- html5 drawimage 不显示,javascript – 来自视频的HTML5 Canvas drawImage在第一次绘制时不显示...
- 在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题
- 狐智、狼道、鹰谋,教你做个聪明的生存者!
- 从零开始一起学习SLAM | 相机成像模型
- idea下载github代码及切换分支
- 关于美食html网页设计完整版,10个以美食为主题的网页设计案例
- 电脑重启只剩下c盘怎么办_我的电脑正在正常运行突然自动重启了,重启后发现系统只剩下C盘了,请教怎么恢复?...
- 什么叫DMZ区?DMZ区它有什么作用?
- 【转载】MAC帧在经过路由器时,其源地址和目的地址会发生改变,路由器的目的地址会出现子在MAC帧中”如何理解?
- teamviewer 使用数量到达上限_解决Teamviewer免费版设备数量限制
- Android root检测方法小结
- java url地址不变_页面跳转后,浏览器地址栏地址保持不变
热门文章
- 字节跳动面试:kafka配置参数
- unity android profile adt,Unity Android OBB
- java冒泡怎么写_java 冒泡 又一种写法
- ffmpeg 拼接mp4_ffmpeg 合并 拼接 mp4视频
- wince系统_汽车操作系统分类
- 广东计算机等级考试一级试题,广东省计算机等级考试(一级)仿真试题
- php wiki搭建,wiki网站搭建
- 开始上手docker
- php 树结构遍历,php 递归遍历树
- java游戏快捷存档_《minecraft》JAVA存档