Question

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

有办法做到这一点吗？即使只是一个简单的警报代码是否存在也会有所帮助..谢谢

Answer 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的小提琴无法从stacksnippet®的无源iframe获取BlobURI：
ES6，ES5

Answer 2

扩展@Kaiido答案：像这样从URL加载将加载整个文件。如果文件很大，将花费很长时间，并且/或者将导致浏览器消耗大量RAM。在具有8GB文件的Chrome上进行了测试-浏览器在使用访存时使用了大约8GB内存。当使用XHR时，似乎并没有耗尽内存，但是请求却花了很长时间才能完成。一种可能的解决方法-检查XHR的进行中事件：

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

检查所选文件是否仍然存在（javascript）

2 个答案: