正文

javascript使用ajax下载文件进度条实现

 2022-03-20  486

关键词：

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<title></title>
</head>
<body>
<div id="a1" data-filename="2018.rar">下载</div>
<div id="progressing"></div>
<script>
    $(‘#a1‘).click(function () {
        var that = this;
        var page_url = ‘http://localhost/test.php‘;
        var req = new XMLHttpRequest();
        req.open("get", page_url, true);
        //监听进度事件
        req.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete);
                $("#progressing").html((percentComplete * 100) + "%");
            }
        }, false);
        req.responseType = "blob";
        req.onreadystatechange = function () {
            if (req.readyState === 4 && req.status === 200) {
                var filename = $(that).data(‘filename‘);
                if (typeof window.chrome !== ‘undefined‘) {
                    // Chrome version
                    var link = document.createElement(‘a‘);
                    link.href = window.URL.createObjectURL(req.response);
                    link.download = filename;
                    link.click();
                } else if (typeof window.navigator.msSaveBlob !== ‘undefined‘) {
                    // IE version
                    var blob = new Blob([req.response], { type: ‘application/force-download‘ });
                    window.navigator.msSaveBlob(blob, filename);
                } else {
                    // Firefox version
                    var file = new File([req.response], filename, { type: ‘application/force-download‘ });
                    window.open(URL.createObjectURL(file));
                }
            }
        };
        req.send();
    });
</script>
</body>
</html>

测试：

AJAX 进度条 - 轮询，彗星？

...运行的任务的进度。我的服务器运行一个PHP脚本，该脚本使用popen函数通过shell命令下载文件。它定期回显/打印正在发生的事情。我想使用AJAX捕获此输出并将其呈现给用户。在另一个问题中查看详情

.netmvc中使用webclient在后台下载文件，前台显示进度。

.NETMVC中使用WebClient在后台下载文件，前台显示进度。求解如何实现，这问题纠结很久了的，最好有实例。财富值不够。都不可以悬赏。一般来说前后台的交互式不会设计成这样的，首先需要明确的是前后的交互在MVC里一种是后... 查看详情

在javascript-ajax中提交表单时如何显示进度条

】在javascript-ajax中提交表单时如何显示进度条【英文标题】：Howtoshowtheprogressbarwhensubmittingtheforminjavascript-ajax【发布时间】：2021-06-1819:18:10【问题描述】：我已经做了进度条和一切。但是当我选择文件上传时出现问题，这意味着... 查看详情

Rails - Ajax 与不显眼的 javascript Jquery UI 进度条

】Rails-Ajax与不显眼的javascriptJqueryUI进度条【英文标题】：Rails-AjaxwithunobtrusivejavascriptJqueryUIProgressBar【发布时间】：2013-10-1413:35:57【问题描述】：我想实现一个从JQUERYUI下来的进度条，并将最大值设置为用户给出的任何数字，并将... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

使用 jQuery 的文件上传进度条

如何使用进度条快速上传大文件？

...带有进度条的视频。这是教程http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-resumable-video-uploade 查看详情

jqueryajax实现上传文件代码，带进度条

原文：jqueryajax实现上传文件代码，带进度条源代码下载地址：http://www.zuidaima.com/share/1550463291116544.htmajax上传文件代码，带进度条的。首页http://localhost:端口/项目名/common/test.htm上传中标签： jquery ajax 上传查看详情

jqueryajax实现上传文件代码，带进度条

...：jqueryajax实现上传文件代码，带进度条源代码下载地址：http://www.zuidaima.com/share/1550463291116544.htmajax上传文件代码，带进度条的。首页http://localhost:端口/项目名/common/test.htm上传中标签： jquery ajax 上传进度... 查看详情

哪个javascript框架支持ajax方式的文件上传

7款基于JavaScript和AJAX的文件上传插件，这些插件基本上都能实现以下功能：多文件上传，拖拽操作，实时上传进度，自定义上传限制1.jQueryFileUpload具有多文件上传、拖拽、进度条和图像预览功能的文件上传插件，支持跨域、分块... 查看详情

[winfrom]下载文件并显示进度条的实现代码(代码片段)

功能实现填写下载地址URL，点击另存为按钮，打开另存为对话框，可以选择保存路径，点击下载按钮进行下载，下载过程显示下载百分比和进度条。窗体：组件labelTextBoxButtonprogressBarsaveFileDialog获取saveFileDialog1文件名和路径Path.Get... 查看详情

将进度条添加到下载文件[重复]

】将进度条添加到下载文件[重复]【英文标题】：Addprogress-bartoDownloadfile[duplicate]【发布时间】：2018-07-2422:06:42【问题描述】：我正在实现一个ViewController来显示以前从我的服务器下载并存储在设备本地的PDF，它可以正常工作，但... 查看详情

文件上传进度条干扰控制器重定向

...表单和一个跟踪上传进度的进度条。但是，控制进度条的javascript会干扰我的控制器，我不知道如何修复它。我的控制器从不使用链接重定向回家（它在没有实现进度条的情况下工作）。删除window.locatio 查看详情

Ajax表单上传进度条

...的HTML4表单上传，而不是新的HTML5API）。进度实际上跟踪文件移动后正在完成的其他工作。它的设计方式是流保持打开状态，直到完成额外的工作，然后服务器端方法最终返回，从而关闭流。我遇到了一些特定于Chrome的问题。我... 查看详情

HTML5：带有进度条的 AJAX 文件上传

...：我正在寻找一个带有HTML5进度条的文件上传器。我尝试使用其他地方的一些教程，包括SO。ThisSOanswer（被接受的）似乎最接近我想要的，但我无法计算出PHP端，$_FILES和$_POST数组似乎都是空的。在人们开始说隐藏iframe等无法实查看详情

记录小文件上传的几个例子（含进度条效果，附源码下载）(代码片段)

1、简单原生上传无javascript脚本、无进度条；借助iframe实现post提交后的无刷新效果；jquery插件ajaxFileUpload.js的实现原型。Html代码<formenctype="multipart/form-data"action="UploadFile_1"method="post"target="frameResult"><divclass="ite 查看详情

ajax大文件切割上传以及带进度条。

分块传输的原理就是利用HTML5新增的文件slice截取函数。代码如下：html：<inputid="f"type="file"name="part"onchange="writeFile()">JS：核心部分已经加粗显示了，其他部分不用看，因为实现的方式有很多种，不一定要按照我的方式去... 查看详情

xmlhttprequest上传文件实现进度条

<!DOCTYPEhtml><html><head><metacharset="UTF-8"> <title>XMLHttpRequest上传文件进度实现</title> <scripttype="text/javascript"> &n 查看详情