HTML5 输入类型文件错误处理答案

【问题标题】：HTML5 input type file Error handlingHTML5 输入类型文件错误处理
【发布时间】：2017-07-01 06:21:43
【问题描述】：

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

1) 用户选择要上传的文件，但在按下上传按钮之前，用户删除了源文件。现在用户点击上传按钮。就我而言，UI 上没有任何反应。

我想问的是，在点击 HTML5 的输入类型文件元素上的上传按钮之前，我们可以通过任何方式知道天气文件仍然存在。

请注意：我使用的是 ember.js

【问题讨论】：

您可以将您的上传方法包装在try...catch 中。这至少可以让你从错误中优雅地恢复。
你能添加一些代码来准确显示你想要做什么吗？

标签： javascript html ember.js

【解决方案1】：

您可以使用“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 或控制台）。

希望这会有所帮助！

【讨论】：

如果源文件在用户点击上传按钮之前被删除，我想给出确切的理由，例如：“源文件重命名、移动或删除”。

【解决方案2】：

我不知道您如何上传文件（Form、XMLHttpRequest、3rdParty lib），但您可以将error event 附加到元素、表单、XHR 元素或事件window 元素本身.

如果您将错误处理程序附加到元素，则无法处理您的用例，因为错误将在读取文件（XHR、FORM 发送等）时抛出，而不是在用户拿起文件。

另一种选择是防止此错误使浏览器“即时”读取文件，方法是：

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

Example

显然，如果文件太大，您应该使用webworker 或在加载之前检查文件大小，这样您就不会冻结 UI。

【讨论】：