话不多说，直接上代码：

<!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. 用 MVC 5 的 EF6 Code First 入门 系列：MVC程序中实体框架的Code First迁移和部署

    用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的Code First迁移和部署 这是微软官方SignalR 2.0教程Getting Started with En ...

  2. Manager（管理器）

    Manager(管理器) 索引 意图 结构 参与者 适用性 效果 实现 实现方式(一):Manager 模式的示例实现. 意图 将对一个类的所有对象的管理封装到一个单独的管理器类中. 这使得管理职责的 ...

  3. 封装ReaderWriterLockSlim

    封装ReaderWriterLockSlim ReaderWriterLockSlim 类 表示用于管理资源访问的锁定状态,可实现多线程读取或进行独占式写入访问. 使用 ReaderWriterLoc ...

  4. 开发框架(OrchardNoCMS)--BootStrap

    基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)--BootStrap 按照几个月之前的计划,也应该写一个使用Bootstrap作为OrchardNoCMS的UI库.之前这 ...

  5. iOS基础 - 相片浏览器

    一.需求分析 点击照片从当前照片位置动画弹出新的视图控制器显示选中的照片,新的视图控制器为全屏显示,背景为黑色,再次点击照片动画缩小至当前选中的照片位置,双击放大照片,如果已经放大则缩小,在新的视图控 ...

  6. win7 64位iis发生错误w3wp.exe解决方法

    服务器为64的,遇到iis错误w3wp.exe 于是百度,网上说的修改iis权限和修改注册表都不行,后来在msdn上找到解决方法,如下所示 设置iis程序集如下即可

  7. WebForm和Asp.Net MVC的理解

    我对WebForm和Asp.Net MVC的理解   比较WebForm和Mvc的请求处理方式 首先简单了解一下Asp.Net中怎么对页面进行请求处理的: 在管道的第7-8个事件之间,有一个MapHt ...

  8. [google面试CTCI] 1-7.将矩阵中特定行、列置0

    [字符串与数组] Q:Write an algorithm such that if an element in an MxN matrix is 0, its entire row and colu ...

  9. 教你用shell写CGI程序

    以前用shell写过一些cgi的例子.今天向大家介绍一下. CGI是一种接口的标准,并不区分编程语言,也就是说,CGI可以用任何一种语言编写,只要这种语言具有标准输入.输出和环境变量.CGI会将标准输 ...

  10. poj3083走玉米地问题

    走玉米地迷宫,一般有两种简单策略,遇到岔路总是优先沿着自己的左手方向,或者右手方向走.给一个迷宫,给出这两种策略的步数,再给出最短路径的长度. ######### #.#.#.#.# S....... ...