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 提交表单】多种方式的注意事项
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...
随机推荐
- AtCoder ARC 090 E / AtCoder 3883: Avoiding Collision
题目传送门:ARC090E. 题意简述: 给定一张有 \(N\) 个点 \(M\) 条边的无向图.每条边有相应的边权,边权是正整数. 小 A 要从结点 \(S\) 走到结点 \(T\) ,而小 B 则 ...
- 关于limit_req和limit_conn的区别
1,首先,limit_req和limit_conn两个模块都是为了来限流的,但是两者不在一个层面,为了搞清楚这个,必须先要弄清楚request和connection的区别,因为在很多情况下,我们把他们 ...
- 【前端开发】前端引入公共部分footer header的几种方法，及iframe自适应高度js
一.引入页面几种方法 1.IFrame引入,看看下面的代码 <iframe frameborder=0 border=0 width=300 height=300 ...
- Python 文件IO
Python 文件I/O 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你传递的表达式转换成一个字符串表达式,并将结果写到标准输出如下: #!/u ...
- 激活Win10内置版Linux （ubuntu）
微软自从14316版本后,就开始原生支持Linux Bash命令行. 1.首先到系统设置——更新和安全——针对开发人员——选择开发者模式. 2.控制面板→程序和功能→启用或关闭Windows功能,勾 ...
- Python学习1-Python和Pycharm的下载与安装
本文主要介绍Python的下载安装和Python编辑器Pycharm的下载与安装. 一.Python的下载与安装 1.下载 到Python官网上下载Python的安装文件,进入网站后显示如下图: 网速 ...
- 2016-2017-2 20155309南皓芯java第四周学习总结
教材内容总结 这次我们学习的还是两章的内容,学习任务量跟上次比的话大体上来讲是差不多的. 继承与多态 继承 继承也符合DRY(Don't Repeat Yourself)原则 Role role1 = ...
- java解析Xml格式的字符串
最近在工作中,需要调别的接口,接口返回的是一个字符串,而且内容是xml格式的,结果在解析json的时候报错,最终修改了接口的返回方式,以Map返回, 才得以接收到这个xml的字符串,然后通过dom4j ...
- hdu 4788 (2013成都现场赛 H题)
100MB=10^5KB=10^8B 100MB=100*2^10KB=100*2^20B Sample Input2100[MB]1[B] Sample OutputCase #1: 4.63%Ca ...
- js各浏览器兼容取的元素的位置X坐标 Y坐标
JS code: function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase(); var isOpera ...