javascript 在上传到文件系统之前检查文件大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30491455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check filesize before uploading to file system
提问by Christian4423
Just a quick question,
只是一个快速的问题，
I have done a lot of research on this already but I have a different approach.
我已经对此进行了大量研究，但我有不同的方法。
My problem: I have a file uploader that works in all browsers using asp.net with VB. The issue is that our system only allows files to be uploaded that are no bigger than 1mb. Now, using a check on the back-end, It will tell the user if the file is too big, and that they must upload a smaller file. However, the weird problem is that it will catch a file that is 2-3mbover the limit. Not if a file is 20mb for example. If upload it, I will get a nasty debug error saying the max file size has been requested.
我的问题：我有一个文件上传器，可以在所有浏览器中使用 asp.net 和 VB。问题是我们的系统只允许上传不超过1mb 的文件。现在，在后端使用检查，它会告诉用户文件是否太大，并且他们必须上传较小的文件。然而，奇怪的问题是它会捕获一个超过限制2-3mb的文件。例如，如果文件是 20mb，则不会。如果上传它，我会收到一个令人讨厌的调试错误，说已请求最大文件大小。
What I wanted to do was a quick check on the front end to preven it from even being sent to the backend.
我想做的是快速检查前端，以防止它甚至被发送到后端。
I used:
我用了：
$(function(){
$('#File1').bind('change', function() {
alert(this.files[0].size);
});
});
To check the file size. It works in chrome and firefox. But not IE. I heard using ActiveX could work if the user allows it in the privacy setting.
检查文件大小。它适用于 chrome 和 firefox。但不是 IE。我听说如果用户在隐私设置中允许使用 ActiveX 可以工作。
I could use browser detection to say "hey, if IE do activeX else do the jQuery" But I am wondering if there is a more reliable method than ActiveX?
我可以使用浏览器检测来说“嘿，如果 IE 执行 activeX，则执行 jQuery”但我想知道是否有比 ActiveX 更可靠的方法？
回答by actaram
Your problem is due to the fact that all IE versions prior to 10 have no support for the HTML5 File API. So, considering that thisis your HTMLInputElement, the following won't work:
您的问题是由于 10 之前的所有 IE 版本都不支持 HTML5 文件 API。因此，考虑到这this是您的HTMLInputElement，以下将不起作用：
this.files[0].size;
The reason is that HTMLInputElement.FileListdoes not exist since the lack of File API support, but you could get the file's name with HTMLInputElement.value. But that's not what you want. You want to get the file's size. Once again, because of the lack of the File API support, IE < 10 doesn't supply the file size information. So, the only way to check the file size for these lesser versions, is to use ActiveX, even if nobody likes doing so.
原因是HTMLInputElement.FileList由于缺乏文件 API 支持，因此不存在，但您可以使用HTMLInputElement.value. 但这不是你想要的。您想获取文件的大小。再一次，由于缺乏文件 API 支持，IE < 10 不提供文件大小信息。因此，检查这些较小版本的文件大小的唯一方法是使用 ActiveX，即使没有人喜欢这样做。
First solution (client side - jQuery)
第一个解决方案（客户端 - jQuery）
You proposed:
你提议：
I could use browser detection to say "hey, if IE do activeX else do the jQuery"
我可以使用浏览器检测说“嘿，如果 IE 执行 activeX 否则执行 jQuery”
If you want to do so, you could have something like that:
如果你想这样做，你可以有这样的事情：
$(function(){
$('#File1').bind('change', function() {
var maxFileSize = 1024000; // 1MB -> 1000 * 1024
var fileSize;
// If current browser is IE < 10, use ActiveX
if (isIE() && isIE() < 10) {
var filePath = this.value;
if (filePath != '') {
var AxFSObj = new ActiveXObject("Scripting.FileSystemObject");
var AxFSObjFile = AxFSObj.getFile(filePath);
fileSize = AxFSObjFile.size;
}
} else {
// IE >= 10 or not IE
if (this.value != '') {
fileSize = this.files[0].size;
}
}
if (fileSize < maxFileSize) {
// Enable submit button and remove any error message
$('#button_fileUpload').prop('disabled', false);
$('#lbl_uploadMessage').text('');
} else {
// Disable submit button and show error message
$('#button_fileUpload').prop('disabled', true);
$('#lbl_uploadMessage').text('File too big !');
}
});
});
// Check if the browser is Internet Explorer
function isIE() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
Warning!
警告！
Before blindly copying this code, note that the ActiveX solution is really a poor one. To make it work, the user must change its Internet Options. Also, this solution is no good for public sites, only for intranet apps.
在盲目复制这段代码之前，请注意ActiveX 解决方案确实很糟糕。要使其工作，用户必须更改其Internet 选项。此外，此解决方案不适用于公共站点，仅适用于内网应用程序。
But I am wondering if there is a more reliable method than ActiveX?
但我想知道是否有比 ActiveX 更可靠的方法？
No, there is not for IE < 10
不，没有 IE < 10
Second solution (jQuery plugin)
第二种解决方案（jQuery插件）
You could the jQuery File Upload. You can easily get the size with it.
你可以jQuery File Upload。你可以很容易地得到它的大小。
Third solution (server side - VB.NET)
第三种解决方案（服务器端 - VB.NET）
Considering you have these asp controls:
考虑到您有这些 asp 控件：
<asp:FileUpload ID="fileUpload" runat="server" />
<asp:Button ID="button_fileUpload" runat="server" Text="Upload File" />
<asp:Label ID="lbl_uploadMessage" runat="server" Text="" ForeColor="Red" />
You can check the chose file size once there is an interaction with the server side. For instance, here I am checking the file's size once the user clicks on the Upload Button.
一旦与服务器端交互，您就可以检查选择的文件大小。例如，在这里，一旦用户单击上传按钮，我就会检查文件的大小。
Protected Sub btnFileUpload_click(ByVal sender As Object, ByVal e As System.EventArgs) Handles button_fileUpload.Click
' A temporary folder
Dim savePath As String = "c:\temp\uploads\"
If (fileUpload.HasFile) Then
Dim fileSize As Integer = fileUpload.PostedFile.ContentLength
' 1MB -> 1000 * 1024
If (fileSize < 1024000) Then
savePath += Server.HtmlEncode(fileUpload.FileName)
fileUpload.SaveAs(savePath)
lbl_uploadMessage.Text = "Your file was uploaded successfully."
Else
lbl_uploadMessage.Text = "Your file was not uploaded because " +
"it exceeds the 1 MB size limit."
End If
Else
lbl_uploadMessage.Text = "You did not specify a file to upload."
End If
End Sub
Edit
编辑
As you said, this last solution doesn't work with files which are too big. To allow this solution to work, you must increase the max upload file size in your web.configfile:
正如您所说，最后一个解决方案不适用于太大的文件。要使此解决方案起作用，您必须增加文件中的最大上传文件大小web.config：
<configuration>
<system.web>
<httpRuntime maxRequestLength="52428800" /> <!--50MB-->
</system.web>
</configuration>
