提交前是否可以查看待上传文件是否被删除？答案

【问题标题】：Can I find out if a to-be-uploaded file was deleted before submitting?提交前是否可以查看待上传文件是否被删除？
【发布时间】：2014-09-16 07:30:19
【问题描述】：

是否有一种与浏览器兼容（在我的情况下是 >IE9、Firefox 和 Chrome）的方法来捕捉边缘情况，即应该以 HTML 形式上传的文件在用户的 PC 上被重命名或删除，因此可以不提交？

在这种情况下，我想在不可能提交后向用户显示一个错误。

【问题讨论】：

亲爱的投票者，我们将不胜感激。
一种解决方法是检查 the file size 是否大于 0 字节...
这里问的是什么不清楚？这个问题很有道理，不是吗？

标签： javascript html forms file-upload

【解决方案1】：

如果你在 IE 中选择一个文件，然后在文件系统中删除它，Windows 只会隐藏该文件，不删除，内容可以读取。所以你没有担心 IE。
当您删除文件时，Chrome 会将文件大小 (input.files[0].size) 调整为 0。遗憾的是，Firefox 不这样做。

使用FileReader API (works in IE 10+, Chrome, Firefox) 的解决方法：

<input type="file" id="fileInput" />
<input type="button" onClick="checkDeleted();" value="Check"/>

<script>
    function checkDeleted() {
        input = document.getElementById('fileInput');
        if (input.files.length > 0) {
            var file = input.files[0];
            var fr = new FileReader();
            fr.onload = function (e) {
                alert("File is readable");
            };
            fr.onerror = function (e) {
                if (e.target.error.name == "NotFoundError") {
                    alert("File deleted");
                }
            }
            fr.readAsText(file);
        } else {
            // no file choosen yet
        }
    }
</script>

工作小提琴here.

【讨论】：

这不适用于 IE 任何 IE 解决方案。甚至 fr.readAsText(file);异步工作。任何可以同步检查的方法

【解决方案2】：

根据@CommonGuy 的回答，我试了一下并调整了优化版本。（用最新的 Chrome 和 Firefox 测试。）

注意：预测文件是否可以被读取和传输。无论文件被删除、修改还是权限改变，都可能导致上传错误，所以我们尝试读取最后一个字节（考虑性能和firefox兼容性）。

function tryReadingFile(file) {
  return new Promise((resolve, reject)=> {
    if (!(file instanceof File)) {
      reject(new Error('Not a File'));
      return;
    }
    let r = new FileReader();
    r.onload = (e)=> {
      resolve();
    };
    r.onerror = (e)=> {
      reject(r.error);
    };
    r.readAsArrayBuffer(file.size > 0 ? file.slice(-1) : file);
  });
}

function $(s, c) {
  return (c ? c : document).querySelector(s);
}
let currentFile;
function setSelectedFile(file) {
  currentFile = file;
  $('#output').innerHTML = file ? 'pending' : '';
}
function handleTestClick() {
  if (!currentFile) {
    return;
  }
  tryReadingFile(currentFile).then((ok)=> {
    $('#output').value = 'OK';
  }, (e)=> {
    $('#output').value = e.toString();
  });
}

<div>
  Step 1: select a file<br/>
  <input type="file" id="input" onchange="setSelectedFile(event.target.files[0])"/><br/>
</div>
<br/>
<div>
  Step 2: delete the file<br/>
  goto your file manager, and rename / delete / modify the file<br/>
</div>
<br/>
<div>
  Step 3: Test if the selected file can be read (and is ready to upload)<br/>
  <button type="button" onclick="handleTestClick()">Test</button><br/>
  <output id="output"></output>
  <div style="height:100px;"></div>
</div>

【讨论】：