直接放代码。

<%@ 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. MODFLOW几个版本的区别

    GWF = GroundWater Flow MODFLOW-2005 — the GWF Model contains revisions of the commonly used flow pac ...

  2. POJ3734 Block母函数入门

    一段长度为n的序列,你有红黄蓝绿四种颜色的砖块,一块砖长度为1,问你铺砖的方案数,其中红黄颜色之和必须为偶数. #include <queue> #include <stack> ...

  3. EVE-NG TOOLKIT在线安装

    功能如图修改EVE-NG管理IP,隐藏未知无效设备.更新或升级.添加设备支持等等 EVE-NG ToolKit中国镜像站官网在线安装:wget -q http://eve-ng.org:81/inst ...

  4. WDS部署基础知识：使用WDS捕获与应用映像（使用WDS定制系统和应用）

    WDS部署基础知识:使用WDS捕获与应用映像(使用WDS定制系统和应用) Win7部署基础知识(8):使用WDS捕获与应用映像  一.添加映像组 使用WDS捕获映像时,会将映像加载到WDS服务器的映像 ...

  5. 解析之IIS解析

  6. TensorFlow实战第三课（可视化、加速神经网络训练）

    matplotlib可视化 构件图形 用散点图描述真实数据之间的关系(plt.ion()用于连续显示) # plot the real data fig = plt.figure() ax = fig ...

  7. 十大经典排序算法(Python,Java实现)

    参照:https://www.cnblogs.com/wuxinyan/p/8615127.html https://www.cnblogs.com/onepixel/articles/7674659 ...

  8. 多个分组树分别实现单选jq+angular

    $scope.seletedGroup=[];var $li=$("#departmentsContainer>ol>li");$.each($li,function( ...

  9. Delphi 文件的编程

  10. zabbix 4 自带 php、httpd漏洞升级

    Zabbix 自带的 PHP 5.4.apache httpd 2.4.6扫描出安全漏洞,需要进行升级. PHP # php -v PHP 5.4.16 (cli) (built: Apr 12 20 ...