[Javascript]XMLHttpRequest对象实现下载进度条

摘要

可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认),"arraybuffer","blob","document",和 "text". response属性的值会根据responseType属性的值的不同而不同,可能会是一个 ArrayBuffer,Blob,Document,string,或者为NULL(如果请求未完成或失败)。

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

它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。

一个例子

服务端以一个一般处理程序来处理下载的请求。

摘要说明

    </span><span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;void</span><span style="color: #000000;"&gt; ProcessRequest(HttpContext context)
    {
        </span><span style="color: #0000ff;"&gt;string</span> fileName = <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;1.docx</span><span style="color: #800000;"&gt;"</span>;<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;客户端保存的<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名</span>
        <span style="color: #0000ff;"&gt;string</span> filePath = context.Server.MapPath(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;~/file/</span><span style="color: #800000;"&gt;"</span> + fileName);<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;路径
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;以字符流的形式下载<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a></span>
        FileStream fs = <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; FileStream(filePath,FileMode.Open);
        </span><span style="color: #0000ff;"&gt;byte</span>[] bytes = <span style="color: #0000ff;"&gt;new</span> <span style="color: #0000ff;"&gt;byte</span>[(<span style="color: #0000ff;"&gt;int</span><span style="color: #000000;"&gt;)fs.Length];
        fs.Read(bytes,</span><span style="color: #800080;"&gt;0</span><span style="color: #000000;"&gt;,bytes.Length);
        fs.Close();
        context.Response.ContentType </span>= <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;application/octet-stream</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;;
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;<a href="https://www.jb51.cc/tag/tongzhi/" target="_blank" class="keywords">通知</a>浏览器下载<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>而不是打开        </span>
        context.Response.AddHeader(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Content-Length</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,bytes.Length.ToString());
        context.Response.AddHeader(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Content-Transfer-Encoding</span><span style="color: #800000;"&gt;"</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Binary</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;);
        context.Response.AddHeader(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Content-Disposition</span><span style="color: #800000;"&gt;"</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;attachment; filename=</span><span style="color: #800000;"&gt;"</span> +<span style="color: #000000;"&gt;
            HttpUtility.UrlEncode(fileName,System.Text.Encoding.UTF8));
        context.Response.BinaryWrite(bytes);
        context.Response.Flush();
        context.Response.End();
    }

    </span><span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;bool</span><span style="color: #000000;"&gt; IsReusable
    {
        </span><span style="color: #0000ff;"&gt;get</span><span style="color: #000000;"&gt;
        {
            </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;;
        }
    }
}</span></pre>

Meta

</head>
<body>

<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="a1"</span><span style="color: #ff0000;"&gt; data-filename</span><span style="color: #0000ff;"&gt;="1.docx"</span><span style="color: #0000ff;"&gt;></span>下载<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="progressing"</span><span style="color: #0000ff;"&gt;></</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span><span style="background-color: #f5f5f5; color: #000000;"&gt;
    $(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;#a1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;).click(</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; () {
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; that </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;this</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; page_url </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;download.ashx</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; req </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;new</span><span style="background-color: #f5f5f5; color: #000000;"&gt; XMLHttpRequest();
        req.open(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;POST</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,page_url,</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;true</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
        </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;监听进度事件</span>

req.addEventListener("progress",function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progressing").html((percentComplete * 100) + "%");
}
},false);

        req.responseType </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;blob</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        req.onreadystatechange </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; () {
            </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (req.readyState </span><span style="background-color: #f5f5f5; color: #000000;"&gt;===</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;4</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;&amp;&amp;</span><span style="background-color: #f5f5f5; color: #000000;"&gt; req.status </span><span style="background-color: #f5f5f5; color: #000000;"&gt;===</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;200</span><span style="background-color: #f5f5f5; color: #000000;"&gt;) {
                </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; filename </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; $(that).data(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;filename</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
                </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;typeof</span><span style="background-color: #f5f5f5; color: #000000;"&gt; window.chrome </span><span style="background-color: #f5f5f5; color: #000000;"&gt;!==</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;undefined</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;) {
                    </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; Chrome version</span>
                    <span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; link </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; document.createElement(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;a</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
                    link.href </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; window.URL.createObjectURL(req.response);
                    link.download </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; filename;
                    link.click();
                } </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;typeof</span><span style="background-color: #f5f5f5; color: #000000;"&gt; window.navigator.msSaveBlob </span><span style="background-color: #f5f5f5; color: #000000;"&gt;!==</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;undefined</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;) {
                    </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; IE version</span>
                    <span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; blob </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;new</span><span style="background-color: #f5f5f5; color: #000000;"&gt; Blob([req.response],{ type: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;application/force-download</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt; });
                    window.navigator.msSaveBlob(blob,filename);
                } </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span><span style="background-color: #f5f5f5; color: #000000;"&gt; {
                    </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; Firefox version</span>
                    <span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; file </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;new</span><span style="background-color: #f5f5f5; color: #000000;"&gt; File([req.response],filename,{ type: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;application/force-download</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt; });
                    window.open(URL.createObjectURL(file));
                }
            }
        };
        req.send();
    });
</span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>

</body>
</html>

测试

文章的介绍

原文链接：https://www.f2er.com/jquery/191561.html

[Javascript]XMLHttpRequest对象实现下载进度条

摘要

一个例子

猜你在找的jQuery相关文章