使用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 ...
随机推荐
- python-Web-django-邮箱登陆
setting: # 发送邮箱 EMAIL_HOST = 'smtp.163.com' EMAIL_PORT = 465 EMAIL_HOST_USER = '666666@163.com' #EMA ...
- 【HANA系列】SAP HANA SQL取表中每行最小值
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL取表中每 ...
- vim编辑器详解(week1_day3)
vi编辑器 作用:编辑文本文件中的内容的工具 命令历史 末行模式中,以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中 ...
- MSF魔鬼训练营-3.5.4Nmap与渗透测试数据库
MSF中可以直接使用db_nmap,它是namp的一个封装与NMAP用法完全一致.其执行结果会自动导入至数据库中. 当然也可以在使用 nmap 的 -oX参数输出一个XML格式的文件.这可以是你在本机 ...
- Shell脚本编程（一）
shell 脚本编程(一) 1 . shell 的作用 Shell的作用是解释执行用户的命令,用户输入一条命令,Shell就解释执行一条,这种方式称为交互式(Interactive),Shell还有一 ...
- plpython 中文分词Windows 版
windows 下安装版本匹配python-3.4.3.amd64.msipostgresql-10.1-2-windows-x64.exe create language plpython3u;se ...
- codeforces 842C Ilya And The Tree （01背包+dfs）
(点击此处查看原题) 题目分析 题意:在一个树中,有n个结点,记为 1~n ,其中根结点编号为1,每个结点都有一个值val[i],问从根结点到各个结点的路径中所有结点的值的gcd(最大公约数)最大是多 ...
- C++练习 | 不使用头插法逆转单链表
void D(PBook pHead) { PBook p,q,s; p=pHead->next->next; q=p->next; s=q->next; pHead-> ...
- Yii2.0中使用Union查询，并使用join，支持分页
$query1 = Class1::find()->where($where); $query2 = Class1::find()->alias('a')->join('left j ...
- MySQL的事务和锁
MySQL的事务和锁 阅读目录 什么是事务 事务:是数据库操作的最小工作单元,是作为单个逻辑工作单元执行的一系列操作:这些操作作为一个整体一起向系统提交,要么都执行.要么都不执行:事务是一组不可再 ...