直接放代码。

<%@ 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. react中key的使用

    面试题: 1). react/vue中的key的作用/内部原理 2). 为什么列表的key尽量不要用index 虚拟DOM的key的作用? 1). 简单的说: key是虚拟DOM对象的标识, 在更新显 ...

  2. 【AMAD】betamax -- 一个ruby-VCR的模仿品，只支持requests

    简介 动机 作用 用法 个人评分 简介 betamax1会记录你的HTTP操作,可以让你在测试的时候不必重复进行真实的请求. 动机 如果你的代码需要和外部资源一起运作,那么测试这段代码的方法就叫做集成 ...

  3. 【Python开发】网页爬取心得

    转载:python 爬虫抓取心得分享 title:python 爬虫抓取心得分享 0x1.urllib.quote('要编码的字符串')如果你要在url请求里面放入中文,对相应的中文进行编码的话,可以 ...

  4. 【Linux开发】linux设备驱动归纳总结（四）：3.抢占和上下文切换

    linux设备驱动归纳总结(四):3.抢占和上下文切换 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  5. [爬虫] BeautifulSoup库

    Beautiful Soup库基础知识 Beautiful Soup库是解析xml和html的功能库.html.xml大都是一对一对的标签构成,所以Beautiful Soup库是解析.遍历.维护“标 ...

  6. [转] Python中的装饰器(decorator)

    想理解Python的decorator首先要知道在Python中函数也是一个对象,所以你可以 将函数复制给变量 将函数当做参数 返回一个函数 函数在Python中和变量的用法一样也是一等公民,也就是高 ...

  7. sql server之批量数据导入

    实际应用场景中,有时会需要把一批数据导入数据库.这批数据可能来源于另一个数据源.比较常规的做法是先读取到dataset,然后跑一个循环,每一行拼一句insert into语句,执行之.用过的人会知道, ...

  8. Junit+Mock单元测试

    项目用的是maven,所需jar包在pom.xml文件里面配置,单元测试要用的jar具体如下: <dependency> <groupId>junit</groupId& ...

  9. Django进阶(一)

    目录 choice参数 MTV与MVC模型 Ajax Ajax传json数据 Ajax传file数据 contentType前后端传输数据编码 ajax + sweetalert 序列化组件 补充 c ...

  10. 移除django的旧版本

    移除django的旧版本 下面这一段代码打进去绝对能看到你想要的,根据这个路径去找版本文件夹,他的名字应该是django.2xx.xxx很长一段,请你删了它! import django import ...