下载刚刚上传的带有html输入文件的文件

Question

我有经典的文件 HTML 输入类型

<input type="file" id="xxx" name="xxx" />

我希望用户可以选择下载他刚刚上传的文件。

我尝试使用 javascript 来通过文件路径下载，但 chrome 似乎有一些安全功能，可以用“fakepath”替换真实路径

C:\fakepath\xxx.pdf

知道如何下载上传的文件（只是客户端，还没有提交表单）？

Answer 1

您可以使用URL.createObjectURL() 创建一个允许用户下载文件的链接。

const input = document.getElementById('upload');
const link = document.getElementById('link');
let objectURL;

input.addEventListener('change', function () {
  if (objectURL) {
    // revoke the old object url to avoid using more memory than needed
    URL.revokeObjectURL(objectURL);  
  }

  const file = this.files[0];
  objectURL = URL.createObjectURL(file);

  link.download = file.name; // this name is used when the user downloads the file
  link.href = objectURL;
});

<input type="file" id="upload" />
<a id="link" download>link to your file (upload a file first)</a>

关于 sn-p 的注意事项：浏览器可能会阻止以这种方式进行多次下载。

Answer 2

这与上面的 sn-p 相同，但有 2 个改进：

• 下载链接不可见
• 自动开始下载（如果没有被浏览器阻止）

文件名仍未被占用

const input = document.getElementById('upload');
const link = document.getElementById('link');
let objectURL;

input.addEventListener('change', function () {
  if (objectURL) {
    // revoke the old object url to avoid using more memory than needed
    URL.revokeObjectURL(objectURL);  
  }

  const file = this.files[0];
  objectURL = URL.createObjectURL(file);

  link.href = objectURL;
  link.click();
});

<input type="file" id="upload" />
<a id="link" download style="display: none">shouldnt be visible</a>