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 提交表单】多种方式的注意事项
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...
随机推荐
- Python标准库内置函数complex介绍
from:http://www.jb51.net/article/57798.htm 本函数可以使用参数real + imag*j方式创建一个复数.也可以转换一个字符串的数字为复数:或者转换一个数字为 ...
- Android Framebuffer介绍及使用【转】
转自:https://www.jianshu.com/p/df1213e5a0ed 来自: Android技术特工队 作者: Aaron 主页: http://www.wxtlife.com/ 原文连 ...
- 自定义ProgressBar的加载效果
三种方式实现自定义圆形页面加载中效果的进度条 To get a ProgressBar in the default theme that is to be used on white/light b ...
- VBA笔记-参考教程
参考教程1: http://www.cnblogs.com/wuzhiblog/tag/VBA/ 1. VBA中字符换行 VBA中字符换行显示需要使用换行符来完成.下面是常用的换行符 ...
- python去除html空格
如下面的 <td> 柳暗花溟</td> html里面的空格 ,想直接用strip()函数去除是不可能的,必须显式的去掉\xa0 例如以上的就可以这样的方式去除空 ...
- java基础38 正则表达式
1.常用的正则表达式 预定义字符类:. 任何字符(与行结束符可能匹配也可能不匹配) \d 数字:[0-9] \D 非数字: [^0-9] \s 空白字符:[ \t\n\x0B\f\r] \S ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 《Javascript启示录》要点汇总
前言:本文是阅读<Javascript启示录>后的一个读书笔记,对本书的要点进行了一个归纳,不是原创内容哦.要想详细了解相关内容,请阅读原书. 对象是由存储值的已命名属性组成的. Java ...
- 【转】Android开启网络调试的方法
方法是偶然看到的: Android 终端adbd服务需要开启5555号端口来建立于adb的连接,如果未开启5555端口,则不能通过网络调试 查看是否可以网络调试: # netstat Android ...
- Linux学习笔记——基于鸟哥的Linux私房菜
Linux学习笔记--基于鸟哥的Linux私房菜 ***** ARM与嵌入式linux的入门建议 (1) 学习基本的裸机编程:ARM7或ARM9,理解硬件架构和控制原理 (这一步是绝对的根基) (2) ...