Ajax提交进度显示实例
概述：ajax提交比较大的文件的时候，我们希望能够看到它上传的进度，代码放下面了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest 上传文件进度条示例</title>
</head>
<body>
<progress id="upload_progress" value="0" max="100"></progress>
<input id="upload_file" type="file" name="upload_file" />
<button id="btn_start">Start</button>
<button id="btn_cancel">Cancel</button>
<script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
var progressBar = document.getElementById('upload_progress');
$('#btn_start').click(function() {
var uploadFile = document.getElementById('upload_file').files[0];
var formData = new FormData();
formData.append('upload_file', uploadFile); // ---------------------------------------
// 原生xmlHttpRequest发送
xhr.open('post', '/server_url.php');
xhr.onload = function() {
alert('完成！');
};
xhr.onerror = function() {
alert('无法连接服务器！');
};
xhr.upload.onprogress = function(progress) {
if (progress.lengthComputable) {
console.log(progress.loaded / progress.total * 100);
progressBar.max = progress.total;
progressBar.value = progress.loaded;
}
};
xhr.upload.onloadstart = function() {
console.log('started...');
};
xhr.send(formData); // ---------------------------------------
// 使用jQuery发送
/**
$.ajax({
type: "POST",
url: "/server_url.php",
data: formData , //这里上传的数据使用了formData 对象
processData: false,
contentType: false, //必须false才会自动加上正确的Content-Type
//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.onprogress = function(progress) {
if (progress.lengthComputable) {
console.log(progress.loaded / progress.total * 100);
progressBar.max = progress.total;
progressBar.value = progress.loaded;
}
};
xhr.upload.onloadstart = function() {
console.log('started...');
};
}
return xhr;
}
}).done(function(resp) {
alert('完成！');
}).fail(function(err) {
alert('无法连接服务器！')
});*/ }); $('#btn_cancel').click(function() {
xhr.abort();
});
</script>
</body>
</html>
原理就是这样，需要在此基础上做扩展的可以随意添加自己想要的功能。
Ajax提交进度显示实例的更多相关文章
- form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例
很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...
- jquery验证后ajax提交，返回消息怎样统一显示的问题
/* jquery验证后ajax提交.返回消息怎样跟jquery验证体系统一显示的问题,网上查了非常多资料.都没有找到明白的答案,通过数小时的尝试,最终攻克了,现举一个简单的样例,给须要的人參考參考吧 ...
- Javascript在ajax提交过程中页面显示加载中，请等待效果，并在提交过程中限制确定按钮防止多次提交，提交完成后，解除提交限制
加载中,请等待div: <div id="load" class="center-in-center" style="display:none; ...
- 关于ajax提交表单的一些实例及遇到的问题和解决办法
ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- jquery ajax提交表单数据的两种方式
http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...
- nginx上传模块nginx_upload_module和nginx_uploadprogress_module模块进度显示，如何传递GET参数等。
ownload:http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gzconfigure and make : . ...
- Django之Ajax提交
Ajax 提交数据,页面不刷新 Ajax要引入jQuery Django之Ajax提交 Js实现页面的跳转: location.href = "/url/" $ajax({ url ...
- 【ajax 提交表单】多种方式的注意事项
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...
随机推荐
- 渗透测试的WINDOWS NTFS技巧集合
译者:zzzhhh 这篇文章是来自SEC Consult Vulnerability Lab的ReneFreingruber (@ReneFreingruber),分享了过去几年从各种博客文章中收集的 ...
- MySQL服务器修改主机名后问题解决
1.单机MySQL主机名修改 今天无事看到自己的主机名不对,于是改了一下,以便区分服务器,那只重启MySQL时出现下面错误: MySQL manager or server PID file coul ...
- 我看到的最棒的Twisted入门教程！
http://www.douban.com/note/232204441/ http://www.cnblogs.com/sevenyuan/archive/2010/11/18/1880681.ht ...
- 用jquery的ajax方法获取不到return返回值
如果jquery中,获取不到ajax返回值. 两个错误写法会导致这种情况:1.ajax未用同步 2.在ajax方法中直接return返回值. 下面列举了三种写法,如果想成功获取到返回值,参考第三种写法 ...
- 浅谈js设计模式之单例模式
单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器中的 window 对象等.在 JavaS ...
- 用HTML+CSS实现--折叠效果
下图是一个Accordion组件,请用HTML+CSS实现其UI,并用面向对象的思路把折叠效果JS实现.如果能用纯css的方式实现其折叠效果更佳.PS/这是小米15年的一道校招笔试题,无意间看到就实现 ...
- Codeforces 807C - Success Rate(二分枚举)
题目链接:http://codeforces.com/problemset/problem/807/C 题目大意:给你T组数据,每组有x,y,p,q四个数,x/y是你当前提交正确率,让你求出最少需要再 ...
- windows环境下的heap spray+stack pivot gadget 实现绕过dep
ASLR+DEP是windows平台下最为常见的两种保护手段.这两种手段使得最基础的jmp esp等手法不再适用,而单纯的堆喷也会因为堆内存不可执行而失效.那么这里就来介绍一下heap spray+s ...
- 【AtCoder】ARC096(C - F)
听说日本题思维都很棒,去涨涨智商qwq C - Half and Half 题解 枚举买多少个AB披萨也行 但是关于买x个AB披萨最后的总花费是个单峰函数,可以三分 这题有点像六省联考2017D1T1 ...
- MemSQL Start[c]UP 2.0 - Round 1 F - Permutation 思维+线段树维护hash值
F - Permutation 思路:对于当前的值x, 只需要知道x + k, x - k这两个值是否出现在其左右两侧,又因为每个值只有一个, 所以可以转换成,x+k, x-k在到x所在位置的时候是否 ...