内容长度不在请求中,但设置了标头.下载后文件无法打开
Content-Length not in request but header is set... file wont open after download
我有以下代码使用带有进度条的XMLHttpRequest下载文件。
编辑:
目的是演示千兆位速度和常见的 10 Mbps 连接之间的区别。用户在 Mac 上下载一个大型视频文件。
进度条显示在页面上,文件在几秒钟内保存到磁盘...然后用户启用硬件切换以限制为10Mbps并再次下载,这次肯定会中止330MB文件的传输。
PHP(下载.php):
<?
$file='/path/to/some/video.mp4';
header('Content-Description: File Transfer');
header('Content-Type: video/mp4');
header('Content-Disposition: attachment; filename='.basename($file));
header('Content-Transfer-Encoding: binary');
header('Content-Length: ' . filesize($file));
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
ob_clean();
flush();
readfile($file);
?>
JavaScript:
var req = new XMLHttpRequest();
req.onprogress=updateProgress;
req.open('GET', 'download', true);
req.setRequestHeader("Content-Type","video/mp4");
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
...
}
};
req.send();
function updateProgress (evt) {
console.log(evt);
var percentComplete = Math.round(evt.loaded * 100 / 330581733);
$('#downloadProgress').val(percentComplete);
$('#progressVal').html(percentComplete.toString() + '%');
}
我的请求包含除内容长度之外的所有标头,当$filsize被回显时......读取330581733(330MB 和一些更改)。我的进度函数使用确切的数字进行测试,但应该是 evt.total;
第一部分:为什么内容长度标头不可用?
第二部分:下载完成后,为什么它无法打开,它去哪里?
我通常不会回答我自己的问题,但由于每个人都说这是不可能的,我想证明你们都错了......
首先,您需要从脚本中引用...文件保护程序.js
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.storageInfo = window.storageInfo || window.webkitStorageInfo;
// Request access to the file system for persistent storage of up to 1GB (1024^3)
navigator.webkitPersistentStorage.requestQuota (1024*1024*1024, function(grantedBytes) {
console.log ('requestQuota: ', arguments); // FOR DEBUGGING
window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes, function(fs) {
console.log ('fs: ', arguments); // FOR DEBUGGING
}, errorHandler);
}, errorHandler);
req = new XMLHttpRequest();
req.onprogress=updateProgress;
req.open('GET', '/path/to/php/download', true);
req.setRequestHeader("Content-Type","video/mp4");
req.responseType = "blob";
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
saveAs(req.response, "filename.mp4"); // DEFINED IN FileSaver.js
}
}
req.send(null);
// PROGRESS BAR UPDATE
function updateProgress (evt) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
$('#downloadProgress').val(percentComplete);
}
这将允许页面上的进度条,并将保存到本地下载目录。
注意:到目前为止,仅适用于 Chrome。测试版本: 30.0.1599.101 (Win 7)
Chrome 会在加载包含存储请求的网页时显示一条消息,询问客户端是否可以将大文件保存到磁盘。
另外值得注意的是,Content-Length 仍然没有出现在请求中,updateProgress 中的 evt.total 已被静态文件大小取代。
相关文章:
- 如何在生成下载文件时显示加载动画
- 直接下载文件,而不是从window.open(url)
- Javascript运行php文件,然后下载文件
- 在单击href链接的同时下载文件
- 通过javascript下载文件时设置文件名
- HTML锚标记无法在android平台中下载文件
- 链接/按钮从子文件夹下载文件--浏览器只是浏览
- iPhone强制下载文件
- 正在下载文件,同时加载另一个页面
- 如何在node.js中只下载文件的前10 KB
- 如何使用XMLHttpRequest下载文件
- 使用angular js在前端下载文件
- 使用blob从ajax结果下载文件
- 通过Android Chrome浏览器下载文件
- 使用AJAX下载文件.来自SD卡
- 如何使用phonegap从android中的URL下载文件
- 使用ajax下载文件
- 无法使用Angular JS和spring MVC打开下载文件
- 无法使用API-node.js从Google Drive下载文件
- 点击jQuery按钮下载文件