话不多说，直接上代码：

<!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. oracle读写文件--利用utl_file包对磁盘文件的读写操作

    oracle读写文件--利用utl_file包对磁盘文件的读写操作 摘要: 用户提出一个需求,即ORACLE中的一个表存储了照片信息,字段类型为BLOB,要求能导出成文件形式. 本想写个C#程序来做, ...

  2. 开始DDD

    如何开始DDD(完) 连续写了两篇文章,这一篇我想是序的完结篇了.结合用户注册的例子再将他简单丰富一下.在这里只添加一个简单需求,就是用户注册成功后给用户发一封邮件.补充一下之前的代码 public ...

  3. Mock原理学习

    同事搓蛋问了我一个问题,mock的原理是啥,没怎么想出来,于是花了点时间学习了一下. 从Moq这个库入手:https://github.com/moq/moq4 Moq用到了Castle的库用于Dyn ...

  4. 详解SpringMVC请求的时候是如何找到正确的Controller

    详解SpringMVC请求的时候是如何找到正确的Controller[附带源码分析] 目录 前言 源码分析 重要接口介绍 SpringMVC初始化的时候做了什么 HandlerExecutionCha ...

  5. 配置Sublime Text 2 的Python运行环境

    Sublime Text 2作为一款轻量级的编辑器,特点鲜明,方便使用,愈发受到普罗大众的喜爱,我个人最近也开始用了起来.同时,我近段时间还在学习Python的相关东西,所以开始用ST2来写Pytho ...

  6. 【推荐】30个Matlab视频教程合集（含GUI视频教程）下载

    自己收集别人网盘上存的资源,分享一下[点击文件名可得到下载地址]        Matlab 7.8 基础视频教程 实例1 数据传递和多窗口编程_avi.zip 205.11 MB   Matlab ...

  7. 如何在网页启动Windows服务

    由于公司有许多windows服务进行业务的处理,所以对服务的维护也是一个比较头痛的问题,因为自己也不知道服务什么时候自动停了,而且更主要的原因是服务都是由运维部门在维护管理,开发这边没有直接操作服务的 ...

  8. 【xcode插件介绍】Alcatraz ----The package manager for Xcode

    对于许多iOS开发者而言,Alcatraz并不陌生,甚至是相当的喜闻乐见.Alcatraz是一款开源的Xcode包管理器,由Marin Usalj.Delisa Mason和Jurre Stender ...

  9. Asp.Net Web API 导航3

    Asp.Net Web API 导航   Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web A ...

  10. twitter 授权过程

    转自:http://blog.csdn.net/yangjian8915/article/details/11816669 官方的流程图如下: 下面开始一步步讲解,如何获取最终的access_toke ...