在上传到文件系统之前检查文件大小

Question

只是一个简单的问题，

我已经对此做了很多研究，但我有不同的方法。

我的问题：我有一个文件上传器，可以在所有浏览器中使用 asp.net 和 VB。问题是我们的系统只允许上传不超过 1mb 的文件。现在，使用后端检查，它会告诉用户文件是否太大，他们必须上传一个较小的文件。然而，奇怪的问题是它会捕获超过限制的 2-3mb 的文件。例如，如果文件是 20mb，则不会。如果上传它，我会收到一个讨厌的调试错误，指出已请求最大文件大小。

我想做的是快速检查前端以防止它甚至被发送到后端。

我用过：

$(function(){
    $('#File1').bind('change', function() {
          alert(this.files[0].size);
        });
});

检查文件大小。它适用于 chrome 和 firefox。但不是IE。我听说如果用户在隐私设置中允许使用 ActiveX 就可以工作。

我可以使用浏览器检测说 "hey, if IE do activeX else do the jQuery" 但是我想知道是否有比 ActiveX 更可靠的方法？

Answer 1

您的问题是因为 10 之前的所有 IE 版本都不支持 HTML5 文件 API。因此，考虑到 this 是您的 HTMLInputElement，以下将不起作用：

this.files[0].size;

原因是 HTMLInputElement.FileList 不存在，因为缺少文件 API 支持，但您可以使用 HTMLInputElement.value 获取文件名。但这不是你想要的。您想要获取文件的大小。再一次，由于缺少对 File API 的支持，IE < 10 不提供文件大小信息。因此，检查这些较小版本的文件大小的唯一方法是使用 ActiveX，即使没有人喜欢这样做。

第一个解决方案（客户端 - jQuery）

您提议：

I could use browser detection to say "hey, if IE do activeX else do the jQuery"

如果你想这样做，你可以有这样的东西：

$(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;
}

警告！

在盲目复制这段代码之前，请注意ActiveX 解决方案确实很差。要使其工作，用户必须更改其 Internet Options。此外，此解决方案不适用于 public 站点，仅适用于 Intranet 应用程序。

But I am wondering if there is a more reliable method than ActiveX?

不，没有 IE < 10

方案二（jQuery插件）

你可以 jQuery File Upload。您可以轻松获得尺寸。

第三种解决方案（服务器端 - VB.NET）

考虑到您有这些 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" />

您可以在与服务器端进行交互后检查选择的文件大小。例如，我在此处检查用户单击上传按钮后的文件大小。

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

编辑

如您所说，最后一个解决方案不适用于太大的文件。要使此解决方案起作用，您必须增加 web.config 文件中的最大上传文件大小：

<configuration>
    <system.web>
        <httpRuntime maxRequestLength="52428800" /> <!--50MB-->
    </system.web>
</configuration>

在上传到文件系统之前检查文件大小

Check filesize before uploading to file system

javascript

asp.net

internet-explorer

activex

file-upload