Question

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

1）用户选择要上传的文件但在按下上传按钮之前用户删除了源文件。现在用户点击上传按钮。在我看来，UI上没有任何事情发生。

我想问一下，在点击HTML5的输入类型文件元素上的上传按钮之前，我们可以知道天气文件仍然存在。

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

Answer 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或控制台）。

希望这有帮助！

Answer 2

我不知道你是如何上传文件的（Form，XMLHttpRequest，3rdParty lib），但你可以将error event附加到Element，表单，XHR元素或事件{{3元素本身。

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

另一种选择是防止此错误，使浏览器“使用”

“即时”读取文件

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

window

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

HTML5输入类型文件错误处理

2 个答案: