Ajax文件上传并添加Bootstrap进度条
1、项目中需要用到文件上传和显示进度,网上各种插件搞得头晕,决定自己实现一个
三个步骤:Ajax上传文件,获取上传进度,显示进度
html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script> </head>
<body>
<form action="/upload_ajax/" enctype="multipart/form-data" method="POST"> <input type="file" id="file"/>
</form> <button id="btn">上传</button> <div class="progress" style="width: 500px">
<div id="progress-bar" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div> <script src="/static/js/jquery-1.9.1.min.js"></script>
<script>
$(function () {
$("#btn").on('click', function () {
UploadFile();
}); $("#file").change(function () {
$("#progress-bar").css("width", 0);
}); // ajax + jQuery上传
function UploadFile() {
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function () {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
} var file = $("#file")[0].files[0];
var form = new FormData();
form.append('myfile', file);
form.append("csrfmiddlewaretoken", '{{ csrf_token }}');
$.ajax({
type: 'POST',
url: '/uploadFile/',
data: form,
processData: false, // 告诉jquery不转换数据
contentType: false, // 告诉jquery不设置内容格式
xhr: xhrOnProgress(function (e) {
var percent = e.loaded / e.total;
$("#progress-bar").css("width", (percent * 500));
}), success: function (arg) {
console.log(arg); }
})
}
});
</script>
</body>
</html>
后台:
def upload_file(request):
if request.method == "POST": # 请求方法为POST时,进行处理
myFile = request.FILES.get("myfile", None) # 获取上传的文件,如果没有文件,则默认为None
if not myFile:
return HttpResponse("no files for upload!")
destination = open(os.path.join("/root/Desktop", myFile.name), 'wb+') # 打开特定的文件进行二进制的写操作
for chunk in myFile.chunks(): # 分块写入文件
destination.write(chunk)
destination.close()
return HttpResponse(myFile.name)
效果:
Ajax文件上传并添加Bootstrap进度条的更多相关文章
- asp.net 文件上传 Uploadify HTML5 带进度条
参考的https://www.cnblogs.com/lvdabao/p/3452858.html这位,在此基础上略有修改: 1.根据Layer,将上传附件做成弹窗显示,引入frame弹窗,在项目当中 ...
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- AJAX文件上传实践与分析,带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- 兼容ie的jquery ajax文件上传
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...
- Android OkHttp文件上传与下载的进度监听扩展
http://www.loongwind.com/archives/290.html 上一篇文章介绍了用Retrofit实现文件的上传与下载,但是我们发现没办法监听上传下载的进度,毕竟我们在做开发的时 ...
- 表单文件上传,ajax文件上传
原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码 index.jsp(表单文件上传) <form action="sh ...
- jQuery插件AjaxFileUpload实现ajax文件上传
转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...
- ajax 文件上传,ajax
ajax 文件上传,ajax 啥也不说了,直接上代码! <input type="file" id="file" name="myfile&qu ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...
随机推荐
- java访问权限表
private(私有的) 默认的(什么都不写) protected(受保护的) public(公共的 ) 同一个类中 yes yes yes yes 同一个包中不同类之间 no yes yes ...
- Java中的split函数拆分后变成null的问题
对于一些特殊的情况,split拆分后并没有保留全的元素 如下例子: String x ="a,,,,,,"; String []y = x.split(",") ...
- MT【62】柯西求三角值域
求$sinx(\sqrt{cos^2x+24}-cosx)$的范围. 解答:[-5,5] $$\because (sinx \sqrt{cos^2x+24}-cosxsinx)^2$$ $$\le ( ...
- [USACO 2018 December Contest]作业总结
t1 Convention 题目大意 每一头牛都有一个来的时间,一共有\(n\)辆车,求出等待时间最长的那头牛等待的最小时间. 解法 第一眼看到这道题还以为是\(2018noip\)普及组的t3魔鬼题 ...
- 【codeforces 175D】 Plane of Tanks: Duel
http://codeforces.com/problemset/problem/175/D (题目链接) 题意 A,B两人玩坦克大战,坦克有生命值,射击间隔,伤害范围,未命中的概率.问A赢的概率是多 ...
- Android Selector 与 Shape 基本用法
分类: Android2011-07-19 11:07 7513人阅读 评论(4) 收藏 举报 androidencodingbutton测试c 1:Selector drawable的item中可以 ...
- jquery&bootstrap
学会了用bootstarp和jquery的引用,布局就简单多了,但就是不怎么自由,必须按照固定的来: 引用文件: <script type="text/javascript" ...
- 【Maven】安装配置、目录结构、配置文件、常见命令
1.下载配置maven步骤 a.windows下配置jdk的系统环境变量:java_home b.windows下配置maven的系统环境变量:maven_home或者m2_home c.window ...
- Linux怎么安装vim编译器
我的Linux系统是Ubantu14.04,默认的是vi编译器,现在安装vim编译器 打开终端输入:sudo apt-get install vim-gtk 一般来说就可以了,但是我的提示出现了报错: ...
- JavaSE学习总结(五)——封装,继承,多态很简单
java面向对象的三大特性是:封装.继承与多态,是面向对象编程的核心. 一.封装 简单说封装就是将同一类事物的特性与功能包装在一起,对外暴露调用的接口. 封装:封装也称信息隐藏,是指利用抽象数据类型把 ...