HTML5输入类型文件错误处理

Question

我使用HTML5的input type file元素构建了一个上传文件的模块。我发现了一个问题，需要通过显示适当的错误信息来解决：

1) 用户选择要上传的文件，但在点击上传按钮之前，用户删除了源文件。现在用户点击上传按钮，但在我的情况下，UI上什么也不会发生。

请问有没有任何方法可以在点击HTML5的input type file元素上的上传按钮之前知道文件是否仍然存在。

请注意：我正在使用Ember.js。

- Sunny Singh

---

你可以先在上传方法中使用 try...catch 进行包装。这样至少可以让你从错误中优雅地恢复过来。 - Nisarg Shah

你可以添加一些代码以准确展示你想要做什么吗？ - Nisarg Shah

Answer 1

我不知道你是如何上传文件的（表单、XMLHttpRequest、第三方库），但你可以将error event附加到元素、表单、XHR元素或甚至window元素本身。

如果你将错误处理程序附加到元素上，你无法处理你的用例，因为错误会在读取文件时立即抛出（XHR、FORM发送等），而不是在用户选择文件时抛出。

另一个选项是通过使用以下方法防止浏览器“即时”读取文件来防止此错误：

window.URL.createObjectURL(files[i]);  

示例

显然，如果文件太大，您应该使用Web Worker或在加载文件之前检查文件大小，以免冻结用户界面。

- JuanGG

Answer 2

您可以使用“try-catch”方法，这样可以让代码运行，并优雅地处理错误。

try{
 //the code you want to test / run goes here
}catch(e){
 //here is where you handle the error thrown (if any)
 console.log("There was an error!\nError message: " + e.message);
 alert("There was an error!\nError message: " + e.message);
 document.getElementById('errorMessageSpan').innerHTML = "There was an error!\nError message: " + e.message + "";
}

在这里，您可以在应用程序崩溃之前捕获错误并将错误呈现给用户或开发人员（DOM 或控制台）。

希望这可以帮助您！

- Coopza

---

如果用户在点击上传按钮之前删除了源文件，我想要给出确切的原因，比如“源文件已重命名、移动或删除”。 - Sunny Singh