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 提交表单】多种方式的注意事项
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...
随机推荐
- Add Two Numbers I & II
Add Two Numbers I You have two numbers represented by a linked list, where each node contains a sing ...
- MySQL数据记录大小写敏感问题【转】
MySQL大小写敏感 字符串大小写敏感和Mysql的数据库的名字.表名字.字段名字.还有字段值有关. 1.和数据库名字.表名字.存储过程和触发器有关 为0时:表示区分大小写,使用CREATE TABL ...
- Codeforces Round #504 D. Array Restoration
Codeforces Round #504 D. Array Restoration 题目描述:有一个长度为\(n\)的序列\(a\),有\(q\)次操作,第\(i\)次选择一个区间,将区间里的数全部 ...
- Vue模板语法总结
文本 数据绑定最常见的方式就是使用"Mustache"语法(两个大括号{{ }})的文本插值 <span>Message: {{ msg }}</span> ...
- React-Native 之 FlexBox介绍和使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- Pytorch多进程最佳实践
预备知识 模型并行( model parallelism ):即把模型拆分放到不同的设备进行训练,分布式系统中的不同机器(GPU/CPU等)负责网络模型的不同部分 —— 例如,神经网络模型的不同网络层 ...
- 一、springboot入门
构建spring boot工程一般采用两种方式 gradle .maven maven方式 pom.xml spring-boot-starter:核心模块,包括自动配置支持.日志和YAML spri ...
- centos 升级linux内核
=============================================== 2018/1/14_第1次修改 ccb_warlock == ...
- mac下PHPStorm2018.2破解教程
1.首先安装phpstorm 2.下载JetbrainsCrack-3.1-release-enc.jar然后把这个文件放入安装phpstorm/contents/lib目录下 3.用文本编辑器打开p ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件
一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...