[英]Check filesize and filetype in Jquery before uploading image via ajax method
[英]Check filesize before uploading to file system
只是一个简单的问题,
我已经对此进行了大量研究,但是我有不同的方法。
我的问题:我有一个文件上传器,该文件上传器在所有使用VB的asp.net的浏览器中均可使用。 问题是我们的系统仅允许上传不超过1mb的文件 。 现在,使用后端检查,它将告诉用户文件是否太大,并且他们必须上传较小的文件。 但是,奇怪的问题是它将捕获超出限制2-3mb的文件。 例如,如果文件大小为20mb,则不会。 如果上传它,我会收到一个讨厌的调试错误,提示已请求最大文件大小。
我想做的是对前端进行快速检查,以防止它被发送到后端。
我用了:
$(function(){
$('#File1').bind('change', function() {
alert(this.files[0].size);
});
});
检查文件大小。 它适用于Chrome和Firefox。 但不是IE。 我听说如果用户在隐私设置中允许使用ActiveX,则可以使用它。
我可以使用浏览器检测说“嘿,如果IE使用ActiveX,否则使用jQuery”,但是我想知道是否有比ActiveX更可靠的方法?
您的问题是由于以下事实造成的:10之前的所有IE版本都不支持HTML5 File API。 因此,考虑到this
是您的HTMLInputElement
,以下操作将无效:
this.files[0].size;
原因是由于缺少File API支持,所以HTMLInputElement.FileList
不存在,但是可以使用HTMLInputElement.value
获取文件名。 但这不是您想要的。 您要获取文件的大小。 再一次,由于缺少File API支持,IE <10不提供文件大小信息。 因此,检查这些较小版本文件大小的唯一方法是使用ActiveX,即使没有人喜欢这样做。
第一个解决方案(客户端-jQuery)
您建议:
我可以使用浏览器检测说“嘿,如果IE做activeX,否则做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选项 。 此外,此解决方案仅对Intranet应用程序不利于公共站点。
但是我想知道是否有比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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.