jq 上传下载进度条

最新推荐文章于 2022-09-02 20:36:47 发布

weixin_30908649

最新推荐文章于 2022-09-02 20:36:47 发布

阅读量202

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhaozhou/p/9057114.html

本文介绍如何利用jQuery AJAX实现文件下载并显示进度条，通过监听进度事件更新进度条状态，展示了完整的HTML和JavaScript代码。

里面只演示了下载的，挂载的是我的七牛服务器上的内容，上传事件和下载是一模一样的，为了大家不乱上传东西到我的服务器，而且我的服务器容量也不大，这里只展示了下载。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    F12查看
	<span class="zz"></span>
	<div id="bx" style="height:22px;width:0;background-color:green;"></div>
</body>
<script src="http://p8sv0x8g6.bkt.clouddn.com/jquery-2.1.1.min.js"></script>
<script>
function download_progress_handler (e) {
  if (e.lengthComputable) {
    var percentComplete = e.loaded / e.total;
    console.log(percentComplete);
	$("#bx").css({"width":percentComplete*100+"%"})
	$(".zz").html(percentComplete);
  } else {
    console.log('no')
  }
}
$.ajax({
    type:"post",
    url:"http://p8sv0x8g6.bkt.clouddn.com/js.css%E5%8E%8B%E7%BC%A9.zip",
    data:{},
    xhr: function() {
        // 获取JQuery内部使用的XMLHttpRequest对象
        var xhr = $.ajaxSettings.xhr(); 
        // 下载进度监控
        xhr.addEventListener('progress', download_progress_handler, false); 
		
        // 上传进度监控(事件和下载是一模一样的，为了大家不乱上传东西到我的服务器，这里只展示了下载。)
        //xhr.upload.addEventListener('progress', upload_progress_handler, false);
        return xhr;//一定要返回，不然jQ没有XHR对象用了
    },
	success:function (data) {
		console.log("成功");
		$(".zz").html("下载成功")
    },
    error:function (data) {
        console.log("失败");
        console.log(data)
    }
});

</script>
</html>

　　展示图：