使用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 ...
随机推荐
- Anaconda环境配置常用命令
1. 新建一个环境: conda create -n ForPytorch python=3.6 该行命令新建了一个叫做ForPytorch的环境,该环境使用的python是3.6版本.新建一个环境的 ...
- Unreal Engine 4 优化教程
本教程旨在帮助开发人员提升基于虚幻引擎(Unreal Engine*4 (UE4))开发的游戏性能.在教程中,我们对引擎内部及外部使用的一系列工具,以及面向编辑器的最佳实践加以概述,还提供了有助于提高 ...
- OpenStack组件——Glance镜像服务
1.glance介绍 Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚拟机镜像的metadata及 ...
- WDS部署基础知识：使用WDS捕获与应用映像（使用WDS定制系统和应用）
WDS部署基础知识:使用WDS捕获与应用映像(使用WDS定制系统和应用) Win7部署基础知识(8):使用WDS捕获与应用映像 一.添加映像组 使用WDS捕获映像时,会将映像加载到WDS服务器的映像 ...
- 【Linux开发】编写属于你的第一个Linux内核模块
曾经多少次想要在内核游荡?曾经多少次茫然不知方向?你不要再对着它迷惘,让我们指引你走向前方-- 内核编程常常看起来像是黑魔法,而在亚瑟 C 克拉克的眼中,它八成就是了.Linux内核和它的用户空间是大 ...
- python学习笔记四 （运算符重载和命名空间、类）
从以上代码中应该了解到: obj.attribute 查找的顺序: 从对象,类组成的树中,从下到上,从左到右到查找最近到attribute属性值,因为rec中存在name的属性,所以x.name可以 ...
- Oracle 用户管理权限
Oracle 用户管理权限 一.创建用户的Profile文件 SQL> create profile student limit // student为资源文件名 FAILED_LOGIN_AT ...
- 设计模式：备忘录模式（Memento）
个人比较喜欢玩单机游戏,什么仙剑.古剑.鬼泣.使命召唤.三国无双等等一系列的游戏我都玩过(现在期待凡人修仙传),对于这些游戏除了剧情好.场面大.爽快之外,还可以随时存档,等到下次想玩了又可以从刚开始的 ...
- 十进制快速幂（牛客多校第五场）-- generator 1
思路: 十进制快速幂. #include <stdio.h>//sprintf #include <cstdlib>////malloc exit strcat itoa sy ...
- 微信小程序，预览在开发工具上显示正常，手机预览二维码报request->fail错误，打开手机的调试功能又正常。
这里错误很明显是属于网址错误,开发工具和手机调试都能走request->success: 唯独常规模式下无法显示. 最开始调试过很多方法,没找出原因.最后到小程序开发设置才发现,自己未配置服务器 ...