使用ajax时给ajax绑定上一个进度条的简单示例
直接放代码。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body> <input type="file" id="myFile"/> <progress id="myProgress" value="0"></progress>
<hr/> <script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>
<script>//第一种方式，ajax绑定进度条
$("#myFile").change(function () {
var formData = new FormData();
formData.append("filename",$(this)[0].files[0]); $.ajax({
method: "post",//请求方式
url: "xxxx",//请求服务端地址
data: formData, //这里上传的数据使用了formData 对象
contentType: false,//避免JQuery操作头部信息，丢失边界符，从而使服务端无法识别此编码类型文件
processData: false,//不序列化将要传输的文件数据
xhr: function () {
//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
var xhr = $.ajaxSettings.xhr();
if (onprogress && xhr.upload) {
xhr.upload.addEventListener("progress", onprogress, false);
return xhr;
}
},
success:function () {//完成事件时 },
error:function () {//出现错误时的事件 }
});
});
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt) {
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100 * loaded / tot); //已经上传的百分比
$("#myProgress").attr("value",per);
} </script>
</body>
</html>
使用ajax时给ajax绑定上一个进度条的简单示例的更多相关文章
- ajax上传进度条
<script type="text/javascript"> function register(){ var frm = document.getElementBy ...
- HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- spring定时任务-文件上传进度条
spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dep ...
- Java 单文件、多文件上传 / 实现上传进度条
博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...
- silverlight漂亮的文件上传进度显示原理及示例
silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园 2009/11/27 13:37:11 阅读 1219 次 概述:在网站根目录web.config里配 ...
- JS框架_(JQuery.js)上传进度条
百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
随机推荐
- linux如何使用QQmail实现网络邮件报警？
环境:CentOS7 目的:考虑到实现服务的高可用性.使用电子邮件通知服务,可以快速的通知维护人员.提高服务的可靠性,而通过 smtp.qq.com 实现脚本邮件报警 一.设置并取得 smtp.qq. ...
- ubuntu显卡（NVIDIA）驱动以及对应版本cuda&cudnn安装
(已禁用集显,禁用方法可自行百度) 驱动在线安装方式进入tty文本模式ctrl+alt+F1关闭显示服务sudo service lightdm stop卸载原有驱动sudo apt-get remo ...
- WDS部署基础知识：使用WDS捕获与应用映像（使用WDS定制系统和应用）
WDS部署基础知识:使用WDS捕获与应用映像(使用WDS定制系统和应用) Win7部署基础知识(8):使用WDS捕获与应用映像 一.添加映像组 使用WDS捕获映像时,会将映像加载到WDS服务器的映像 ...
- nginx - 反向代理 - 配置文件模板 - nginx 代理tcp的服务 - 部署示意图
danjan01deiMac:~ danjan01$ cat /usr/local/etc/nginx/nginx.conf|grep -v '^$' worker_processes 1; even ...
- eclipse 导出jar 没有主清单属性的解决方法
eclipse编写导出的jar文件,运行出现了没有主清单属性,问题在哪里呢?有下面几种方法: 1. 导出jar文件的时候选择[可运行的jar文件]而不是[Jar文件]即可,如下图: 2. 在jar文件 ...
- CMMI将能力成熟度分为5个级别
CMMI将能力成熟度分为5个级别(初始级,已管理级,已定义级,量化管理级,优化级) ． 初始级 此时软件过程是无序的,有时甚至是混乱的,对过程几乎没有定义,成功取决于个人努力.管理是反应式的. ．可管 ...
- 2019牛客暑期多校训练营（第二场）-H Second Large Rectangle（次大子矩阵，降维，直方图+单调栈）
题目链接:https://ac.nowcoder.com/acm/contest/882/H 题目:给n×m的由01组成的矩阵,求次大全1子矩阵的大小. 思路:第一步还是降维操作,用a[i][j]记录 ...
- Find Duplicate Subtrees
Given a binary tree, return all duplicate subtrees. For each kind of duplicate subtrees, you only ne ...
- [转帖]一张图让你看懂InnoDB
一张图让你看懂InnoDB 2018年05月10日 10:02:34 灵魂自由的忙人 阅读数 299 https://blog.csdn.net/xiaoyi23000/article/details ...
- c# 不让窗体显示在alt tab中
protected override CreateParams CreateParams { get { const int WS_EX_APPWINDOW = 0x40000; const int ...