Question

是否有浏览器兼容（在我的情况下＆gt; IE9，Firefox和Chrome）的方式来捕捉在用户的PC上重命名或删除应该以HTML格式上传的文件的边缘情况无法提交？

我想在不可能的提交后向用户显示错误。

Answer 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。

Answer 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>

我可以在提交之前找出是否删除了要上传的文件吗？

2 个答案: