JavaScript文件上传大小验证
是,W3C有一项新功能,它受到一些现代浏览器File API的支持。它可以用于此目的,并且很容易测试它是否受支持,如果不是,则会退回到其他机制(如果需要)。
这里有一个完整的例子:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
var input, file;
// (Can't use `typeof FileReader === "function"` because apparently
// it comes back as "object" on some browsers. So just see if it's there
// at all.)
if (!window.FileReader) {
bodyAppend("p", "The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('fileinput');
if (!input) {
bodyAppend("p", "Um, couldn't find the fileinput element.");
}
else if (!input.files) {
bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
bodyAppend("p", "Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
}
}
function bodyAppend(tagName, innerHTML) {
var elm;
elm = document.createElement(tagName);
elm.innerHTML = innerHTML;
document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>
而且here它是在行动。尝试使用最新版本的Chrome或Firefox。
稍微偏离主题,但:请注意,客户端验证服务器端验证无可替代。客户端验证纯粹是为了提供更好的用户体验。例如,如果您不允许上传超过5MB的文件,则可以使用客户端验证来检查用户选择的文件大小不超过5MB,并且如果它是(所以他们不会花费所有时间上传,只是为了得到在服务器上扔掉的结果),但是您必须也强制在服务器上的限制,因为所有客户端限制(和其他验证)可以绕过。
否
是的,在较新的浏览器中使用File API。详情请参阅TJ的回答。
如果您还需要支持较旧的浏览器,则必须使用基于Flash的上传程序(如SWFUpload或Uploadify)来执行此操作。
SWFUpload Features Demo显示file_size_limit
设置如何工作。
请注意,这(显然)需要Flash,加上其工作方式与普通上传表单有点不同。
你可以试试这个fineuploader
它IE6(和avove),Chrome或Firefox
Fine Uploader无法在IE9及更旧版本中验证文件大小,因为不支持File API。 IE10是第一个支持File API的Internet Explorer版本。 – 2012-11-17 18:09:55
下工作正常使用jQuery:
<form action="upload" enctype="multipart/form-data" method="post">
Upload image:
<input id="image-file" type="file" name="file" />
<input type="submit" value="Upload" />
<script type="text/javascript">
$('#image-file').bind('change', function() {
alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
});
</script>
</form>
如果你使用jQuery验证,你可以写这样的事情:
$.validator.addMethod(
"maxfilesize",
function (value, element) {
if (this.optional(element) || ! element.files || ! element.files[0]) {
return true;
} else {
return element.files[0].size <= 1024 * 1024 * 2;
}
},
'The file size can not exceed 2MB.'
);
我使用一个主要的Javascript函数我在Mozilla开发人员网络站点https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications找到,以及与AJAX的另一个功能,并根据我的需要进行更改。它接收一个关于我的html代码中我想写文件大小的位置的文档元素id。
<Javascript>
function updateSize(elementId) {
var nBytes = 0,
oFiles = document.getElementById(elementId).files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes/1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
}
return sOutput;
}
</Javascript>
<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>
<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>
干杯
如果IE的“文件模式”设置为“标准”您可以使用简单的JavaScript“大小”的方法来获得上传文件的大小。
设置IE的 '文件模式' 到 '标准':
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
比,使用 '尺寸' JavaScript方法来获取上传的文件大小:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>
这对我的作品。
无论您添加哪个元标记,这都不适用于IE9或更高版本。 – 2013-07-31 14:27:02
这很简单。
var oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>
if (oFile.size > 2097152) // 2 mb for bytes.
{
alert("File size must under 2mb!");
return;
}
即使问题得到解答,我想发布我的答案。可能对未来的观众来说很方便。您可以像下面的代码一样使用它。
<input type="file" id="fileinput" />
<script type="text/javascript">
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert("Got the file.n"
+"name: " + f.name + "n"
+"type: " + f.type + "n"
+"size: " + f.size + " bytesn"
+ "starts with: " + contents.substr(1, contents.indexOf("n"))
);
if(f.size > 5242880) {
alert('File size Greater then 5MB!');
}
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
Works的动态和静态文件元素(文件大小的方法是非标准功能,并且自壁虎7.0弃用。)
的Javascript唯一的解决办法
function ValidateSize(file) {
var FileSize = file.files[0].size/1024/1024; // in MB
if (FileSize > 2) {
alert('File size exceeds 2 MB');
// $(file).val(''); //for clearing with Jquery
} else {
}
}
<input onchange="ValidateSize(this)" type="file">
FileSize方法是一种非标准功能,自Gecko 7.0以后不推荐使用。 https://developer.mozilla.org/en-US/docs/Web/API/File/fileSize – MissRaphie 2017-07-10 17:11:41
尼斯答案。我有同样的问题,但你的解决方案为我工作:) – 2017-07-13 10:27:33
JQuery ex在这个线程提供了充足是非常过时的,而谷歌是没有帮助的所有所以这里是我的版本:
<script type="text/javascript">
$('#image-file').on('change', function() {
console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
});
</script>
+1对于“所有客户端的限制(和其他验证)可以规避”。这对于“本地”/“编译”数据库前端应用程序也是如此。并且不要将数据库访问密码放入编译后的代码中,甚至不要“加密”(密码也在代码中,最近才看到)。 – masterxilo 2018-01-12 12:13:32