话不多说，直接上代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

    <title>XMLHttpRequest上传文件进度实现</title>

    <script type="text/javascript">

        var xhr;

        var ot;//

        var oloaded;

        //上传文件方法

        function UpladFile() {

            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象

            var url = "uploadFile"; // 接收上传文件的后台地址 

            var form = new FormData(); // FormData 对象

            form.append("mf", fileObj); // 文件对象

            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象

            xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。

            xhr.onload = uploadComplete; //请求完成

            xhr.onerror =  uploadFailed; //请求失败

            xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】

            xhr.upload.onloadstart = function(){//上传开始执行方法

                ot = new Date().getTime();   //设置上传开始时间

                oloaded = 0;//设置上传开始时，以上传的文件大小为0

            };

            xhr.send(form); //开始上传，发送form数据

        }

        //上传进度实现方法，上传过程中会频繁调用该方法

        function progressFunction(evt) {

             var progressBar = document.getElementById("progressBar");

             var percentageDiv = document.getElementById("percentage");

             // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0

             if (evt.lengthComputable) {//

                 progressBar.max = evt.total;

                 progressBar.value = evt.loaded;

                 percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

             }

            var time = document.getElementById("time");

            var nt = new Date().getTime();//获取当前时间

            var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s

            ot = new Date().getTime(); //重新赋值时间，用于下次计算

            var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b

            oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算

            //上传速度计算

            var speed = perload/pertime;//单位b/s

            var bspeed = speed;

            var units = 'b/s';//单位名称

            if(speed/1024>1){

                speed = speed/1024;

                units = 'k/s';

            }

            if(speed/1024>1){

                speed = speed/1024;

                units = 'M/s';

            }

            speed = speed.toFixed(1);

            //剩余时间

            var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);

            time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';

               if(bspeed==0)

                time.innerHTML = '上传已取消';

        }

        //上传成功响应

        function uploadComplete(evt) {

         //服务断接收完文件返回的结果

         //    alert(evt.target.responseText);

             alert("上传成功！");

        }

        //上传失败

        function uploadFailed(evt) {

            alert("上传失败！");

        }

          //取消上传

        function cancleUploadFile(){

            xhr.abort();

        }

    </script>

</head>

<body>

    <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>

    <span id="percentage"></span><span id="time"></span>

    <br /><br />

    <input type="file" id="file" name="myfile" />

    <input type="button" onclick="UpladFile()" value="上传" />

    <input type="button" onclick="cancleUploadFile()" value="取消" />

</body>

</html>

若想用jQuery 中的ajax实现的话，jQuery的 ajax 方法没有关于 progress 事件的操作，此时需要调用的XMLHttpRequest对象是指定progress 事件。

$.ajax({

    type: "POST",

　　url: "upload",

　　data: formData ,　　//这里上传的数据使用了formData 对象

　　processData : false,

　　//必须false才会自动加上正确的Content-Type

　　contentType : false ,

　　　　

　　//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用

　　xhr: function(){

　　　　var xhr = $.ajaxSettings.xhr();

　　　　if(onprogress && xhr.upload) {

　　　　　　xhr.upload.onprogress = progressFunction;
 　　　　　 return xhr;
 　　　 }
 　 }
});

XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。

它分成上传和下载两种情况

１）下载的progress事件属于XMLHttpRequest对象

２）上传的progress事件属于XMLHttpRequest.upload对象。

下载进度实现：
xhr.onprogress = downloadProgress;

function downloadProgress(event) {//未测试

    if(event.lengthComputable) {

        var percentComplete = event.loaded / event.total;

    }

}

XMLHttpRequest上传文件实现进度条的更多相关文章

  1. layui上传文件配合进度条

    首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...

  2. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  3. struts2上传文件添加进度条

    给文件上传添加进度条,整了两天终于成功了. 想要添加一个上传的进度条,通过分析,应该是需要不断的去访问服务器,询问上传文件的大小.通过已上传文件的大小, 和上传文件的总长度来评估上传的进度. 实现监听 ...

  4. asp.net mvc 实现上传文件带进度条

    本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...

  5. vue项目上传文件以及进度条

    最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把 ...

  6. jQuery上传文件显示进度条

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

  7. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  8. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  9. ajaxSubmit() 上传文件和进度条显示

    1.  首先引用js文件 <script type="text/javascript" src="/js/jquery/jquery.form.js"&g ...

随机推荐

  1. 【转】 Android项目的mvc模式

    MVC (Model-View-Controller):M是指逻辑模型,V是指视图模型,C则是控制器.一个逻辑模型M可以对于多种视图模型V,比如一批统计数据你可以分别用柱状图.饼图V来表示.一种视图模 ...

  2. 介绍一款基于jquery好用的编辑框htmlbox.full.js

    1. 可选择背景颜色,自主选择工具,感觉挺好用的,不过需要注意,添加引用后找不到工具图标的图片,找到脚本修改idir:属性改成自己的图片文件夹存放路径即可. asp.net mvc3提交内容报错提示含 ...

  3. SpringMVC 异常处理

    SpringMVC学习系列(10) 之 异常处理 在项目中如何处理出现的异常,在每个可能出现异常的地方都写代码捕捉异常?这显然是不合理的,当项目越来越大是也是不可维护的.那么如何保证我们处理异常的代码 ...

  4. 优秀Python学习资源

    优秀Python学习资源收集汇总(强烈推荐)   Python是一种面向对象.直译式计算机程序设计语言.它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用縮 ...

  5. c# 自定义多选下拉列表2

    以下为工作中遇到的,备注一下 先需要几个辅助类 #region GripBounds using System.Drawing; internal struct GripBounds { ; ; pu ...

  6. 关于SourceTree License

    SourceTree 是免费软件,但是需要到官网注册一下账号以获得免费的License 官网地址:https://id.atlassian.com/login?application=mac& ...

  7. SQLSERVER数据库自动备份工具SQLBackupAndFTP(功能全面)

    挺好用的SQLSERVER数据库自动备份工具SQLBackupAndFTP(功能全面) 这个工具主要就是自动备份数据库,一键还原数据库,发送备份数据库日志报告到邮箱,自动压缩备份好的数据库 定期执行数 ...

  8. new关键字

    Javascript的实例化与继承:请停止使用new关键字   本文同时也发表在我另一篇独立博客 <Javascript的实例化与继承:请停止使用new关键字>(管理员请注意!这两个都是我 ...

  9. Redis系统学习 三、使用数据结构

    前言:上一章,简单介绍了5种数据结构,并给出了一些用例.现在是时候来看看一些高级的,但依然很常见的主题和设计模式 一.大O表示法(Big O Notation ) 常用时间复杂度O(1)被认为是最快速 ...

  10. WCF学习笔记之传输安全

    WCF学习笔记之传输安全 最近学习[WCF全面解析]下册的知识,针对传输安全的内容做一个简单的记录,这边只是简单的记录一些要点:本文的内容均来自[WCF全面解析]下册: WCF的传输安全主要涉及认证. ...