直接放代码。

<%@ 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. 【HANA系列】SAP HANA SQL从给定日期中获取月份

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL从给定日 ...

  2. 一加手机2 进入recovery 模式无法挂载USB存储器通过命令窗口上传ROM镜像

    试过3.0.3-0和3.0.3-1的recovery都无法使用“挂载USB大容量存储器”模式,这肯定让很多清掉系统(就是system分区)的小伙伴无力吐槽,因为这样子rom就无法在rec里面从电脑拷到 ...

  3. 攻防世界新手区pwn writeup

    CGfsb 题目地址:https://adworld.xctf.org.cn/task/answer?type=pwn&number=2&grade=0&id=5050 下载文 ...

  4. SolidWorks学习笔记2草图

    几何约束 显示和隐藏约束 单个直线的约束 绘制一个直线,点击左侧的中的水平或者竖直,, 如果要删除改约束,右键绿色的小矩形,相关被约束的对象变成分红,点击删除即可. 两个对象之间的约束 点击一个对象, ...

  5. jmeter-JDBC 连接池设置

  6. 6.maven的安装

    JAVA配置 JAVA_HOME=安装目录 PATH=%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin CLASSPATH=%JAVA_HOME%\lib\dt.jar;%JAV ...

  7. Eclipse中导入Maven Web项目并配置其在Tomcat中运行

    今天因为实习的关系需要讲公司已经开发的项目导入进Eclipse,而公司的项目是用Maven来构建的所以,需要将Maven项目导入进Eclipse下. 自己因为没有什么经验所以搞了得两个多小时,在这里和 ...

  8. MySQL_入手<一>增--数据库操作

    创建数据库 create database db_sanguo charset utf8; 切进db_sanguo use db_sanguo 创建英雄 create table t_hero( id ...

  9. python-queue队列-生产者消费者

    import threading,time import queue q = queue.Queue(maxsize=10) def Producer(name):#生产者 count=1 while ...

  10. JS基础_标识符

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...