话不多说，直接上代码：

<!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. 最初的ajax案例

    ----------------------原始的ajax: function guo() {            var xhr            if (XMLHttpRequest) {  ...

  2. Ubuntu(Linux) + mono + jexus +asp.net MVC3

    Ubuntu(Linux) + mono + jexus +asp.net MVC3 部署 感谢  张善友 的建议,我把 微信订餐  由nginx 改成 jexus,目前运行状况来说,确实稳定了很多, ...

  3. DDD（领域驱动设计）应对具体业务场景，如何聚焦 Domain Model（领域模型）？

    DDD(领域驱动设计)应对具体业务场景,如何聚焦 Domain Model(领域模型)? 阅读目录: 问题根源是什么? <领域驱动设计-软件核心复杂性应对之道>分层概念 Repositor ...

  4. 代码阅读软件kscope源码安装指导

    安装 kscope-1.6.2 1. ./configure --without-arts --prefix=/soft/kscope-1.6.2  (I customize the installi ...

  5. MVC与Validate验证提示的样式修改

    MVC中使用Validate的验证,要修改错误提示样式一共有3处需要修改,否则就不太完美了: MVC中的Validate的验证机制只用在后台写一次,就可以完成前台和后台的完美验证,前台的验证主要是依靠 ...

  6. c# in deep 之LINQ简介（1）

    前两天公司进了一批书,在借阅jon skeet的c# in deep收获颇大,本书特点是介绍了不同版本的c#所增加的新特性.今天先写一下书中对linq的描述. 很多初学者在使用VS2010或2013写 ...

  7. CSDN CODE平台,中国版Github简要使用说明

    CSDN CODE平台,中国版Github简要使用说明!(多图慎入)   楼主说 以前一直看到别人在用github发布自己的代码,各种牛逼,各种羡慕嫉妒恨.最后终于受不了了,也去注册了一个,注册到没什 ...

  8. cocos2d(CCSprite 用贝塞尔做抛物线，足球精灵并且同时做旋转放大效果)

    今天刚学到Cocos2d中的动作哪一张,自己做了一个用贝塞尔曲线足球精灵实现同时放大旋转和抛物线动作. 使用 [CCSpawn actions:,,]链接这几个动作,同时做.与CCSequence(一 ...

  9. .Net程序员面试试题

    1:简述private protected public internal修饰符的访问权限? private:私有成员在类的内部可以访问: protected:受保护的成员,在类的内部和继承类中可以访 ...

  10. Android分渠道打包（Python 3.4 实现）

    Android批量打包实现有很多方式你可以用Ant,Maven或者Gradle.在处理多个Library和NDK编译的时候配置有些麻烦,且每个渠道都编译一次效率较低.如果没有复杂的分渠道编译需求,我们 ...