检查选定的文件是否仍然存在（javascript）答案

【问题标题】：check selected file if it still exist (javascript)检查选定的文件是否仍然存在（javascript）
【发布时间】：2017-09-04 02:03:32
【问题描述】：

我在一个页面上有 2 个元素一个输入类型=“文件”和一个按钮单击按钮时，我想检查在输入元素上选择的文件是否仍然存在。假设文件在被选择之后和单击按钮之前被删除或重命名。

有没有办法做到这一点？即使只是一个简单的警报代码，无论它是否存在都会有所帮助..谢谢

【问题讨论】：

这是一个奇怪的边缘案例来测试。
为什么需要这个？不应该将数据作为 blob 上传，无论如何都可以使用吗？
@clabe45，除非你对它进行切片，或者将其转换为 arrayBuffer / dataURL，否则浏览器不会将实际文件的数据保存在内存中，只会直接指向磁盘上的文件。

标签： javascript file input

【解决方案1】：

您可以使用URL.createObjectURL 方法在磁盘上创建一个指向您的文件的直接指针。

然后要检查它是否已被删除/重命名，您可以简单地尝试获取它（通过fetch API，或通过XHR）。

let url;
inp.onchange = e => {
  url = URL.createObjectURL(inp.files[0]);
  btn.disabled = false;
}
btn.onclick = e => {
  fetch(url)
    .then((r) => console.log("File still exists"))
    .catch(e => console.log("File has been removed or renamed"));
}

<input type="file" id="inp">
<button disabled id="btn">check if deleted</button>

ES5 版本： （有很多怪癖要处理...仅在 FF Safari 和 chrome 中测试过）

var url;
inp.onchange = function(e) {
  url = URL.createObjectURL(inp.files[0]);
  btn.disabled = false;
}
btn.onclick = function(e) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url); // cache trick for Safari
  xhr.responseType = 'blob';
  var headers = { // Safari uses the cache...
    "Pragma": "no-cache",
    "Cache-Control": "no-store, no-cache, must-revalidate, post-check=0, pre-check=0",
    "Expires": 0,
    "Last-Modified": new Date(0), // January 1, 1970
    "If-Modified-Since": new Date(0)
  };
  for (var k in headers) {
    xhr.setRequestHeader(k, headers[k]);
  }
  xhr.onload = function(e) {
    if (xhr.response.size) {
      console.log("File still exists\n");
    } else { // chrome fires the load event
      console.log("File has been removed or renamed (load event)\n");
    }
  };
  xhr.onerror = function(e) { // sometimes it fires an error
    console.log("File has been removed or renamed (error event)\n");
  };
  try {
    xhr.send();
  } catch (e) { // sometimes it throws in FF
    console.log("File has been removed or renamed (caught)\n");
  }
}

<input type="file" id="inp">
<button disabled id="btn">check if deleted</button>

Safari 的小提琴不会从 stacksn-p® 的空源 iframe 中获取 BlobURI：
ES6、ES5

【讨论】：

【解决方案2】：

扩展@Kaiido 答案：像这样从 URL 加载将加载整个文件。如果文件很大，则需要很长时间和/或会导致浏览器消耗大量 RAM。使用 8GB 文件在 chrome 上测试 - 使用 fetch 时浏览器使用了大约 8GB 内存。使用 XHR 时，它似乎不会占用内存，但请求需要很长时间才能完成。一种可能的解决方法 - 检查 XHR 的 onprogress 事件：

xhr.onprogress = function (e) {
  if (e.loaded > 0) {
    xhr.abort();
    console.log("File still exists");
  }
}

【讨论】：