直接放代码。

<%@ 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绑定上一个进度条的简单示例的更多相关文章

  1. ajax上传进度条

    <script type="text/javascript"> function register(){ var frm = document.getElementBy ...

  2. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  3. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  4. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  5. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  6. spring定时任务-文件上传进度条

    spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dep ...

  7. Java 单文件、多文件上传 / 实现上传进度条

    博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...

  8. silverlight漂亮的文件上传进度显示原理及示例

    silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园  2009/11/27 13:37:11 阅读 1219  次 概述:在网站根目录web.config里配 ...

  9. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

随机推荐

  1. 配置文件 "G:\虚拟机列表\Linux001.vmx" 由产品 VMware 创建, 其版本 VMware Workstation 不兼容并且不能使用.

    解析: 报这种错误一般是虚拟机文件里声明的VMware版本和真实的VMware版本不一致导致.我们可以手动更改真实VMware版本,或者更改虚拟机文件里声明的VMware版本.以下我们通过更该虚拟机文 ...

  2. Django-ORM之ManyToManyField的使用-多对多关系

    表结构设计 多对多关系表创建外键,典型例子:书--作者--出版社,书与作者的关系就可以看作是多对多关系. # 表结构设计 class Book(models.Model): title = model ...

  3. eclipse中出现错误 Syntax error, insert "}" to complete Block

    结果原因如下 划红线的地方多出来类似于空格的占位符,也许这样看不清楚. 我们来显示空格.制表符和回车键. Window->Preferences->General->Editors- ...

  4. 【VS开发】MFC运行时库与debug、release版本之间的配置关系

    参考内容: 前段时间从网上下来一个有意思的代码,用VS2010打开时需要将工程转换为2010的工程,转化后却出现了编译不通过的问题,类似这样的错误:c:\program files\microsoft ...

  5. 蒲公英v5p%n搭建局域网后用nginx做代理的配置

    1.nginx.conf worker_processes auto; error_log /usr/local/var/log/nginx/error.log; events { worker_co ...

  6. 论文阅读 | BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain

    BadNets: 识别机器学习模型供应链中的漏洞 摘要 基于深度学习的技术已经在各种各样的识别和分类任务上取得了最先进的性能.然而,这些网络通常训练起来非常昂贵,需要在许多gpu上进行数周的计算;因此 ...

  7. php调用shell的方法

    一.配置 查看php.ini中配置是否打开安全模式,主要是以下三个地方safe_mode =  (这个如果为off下面两个就不用管了)disable_functions = safe_mode_exe ...

  8. 布隆过滤器（Bloom Filter）原理以及应用

    应用场景 主要是解决大规模数据下不需要精确过滤的场景,如检查垃圾邮件地址,爬虫URL地址去重,解决缓存穿透问题等. 布隆过滤器(Bloom Filter)是1970年由布隆提出的.它实际上是一个很长的 ...

  9. 【基本优化实践】【1.1】IO优化——把文件迁移到不同物理磁盘

    [1]概念 把不同数据文件移动到不同的物理磁盘,无疑是一个提高IO的有效办法 在资源可以的情况下,尽量把 temp .数据库的主数据文件(mdf).数据库的从数据数据(ndf).数据库的事务日志文件( ...

  10. Codeforces 1221E. Game With String

    传送门 首先每一段连续的 $...$ 都是互不影响的,所以可以一段段考虑 考虑最简单的情况,此时每一段都大于等于 $a$ 并且小于 $2b$ ,那么每一段都只能放一次,胜负直接根据段数即可得到答案 考 ...