JavaScript文件上传大小验证

有没有办法检查文件大小之前上传使用JavaScript?

693907 次浏览
小开

没有是的，在更新的浏览器中使用File API。详见TJ的回答。

如果你也需要支持旧的浏览器，你将不得不使用基于flash的上传器，如SWFUpload或Uploadify来做到这一点。

SWFUpload功能演示显示了file_size_limit设置的工作方式。

注意，这(显然)需要Flash，加上它的工作方式与正常的上传表单有点不同。

小开
最佳答案

是的，你可以使用文件API。

这是一个完整的例子(见评论):

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
// (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) { // This is VERY unlikely, browser support is near-universal
console.log("The file API isn't supported on this browser yet.");
return;
}


var input = document.getElementById('fileinput');
if (!input.files) { // This is VERY unlikely, browser support is near-universal
console.error("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
addPara("Please select a file before clicking 'Load'");
} else {
var file = input.files[0];
addPara("File " + file.name + " is " + file.size + " bytes in size");
}
});


function addPara(text) {
var p = document.createElement("p");
p.textContent = text;
document.body.appendChild(p);
}
body {
font-family: sans-serif;
}
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>

请注意，客户端验证是服务器端验证的没有东西可以代替。客户端验证纯粹是为了提供更好的用户体验。例如，如果你不允许上传一个超过5MB的文件，你可以使用客户端验证来检查用户选择的文件大小不超过5MB，如果是，就给他们一个友好的消息(这样他们就不会花那么多时间上传，只是为了让结果在服务器上被丢弃)，但是你必须也在服务器上强制这个限制，因为所有客户端限制(和其他验证)都可以规避。

小开

你可以试试这个fineuploader

它在IE6(及以上版本)、Chrome或Firefox下运行良好

小开

使用jquery:

$('#image-file').on('change', function() {
console.log('This file size is: ' + this.files[0].size / 1024 / 1024 + "MiB");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="upload" enctype="multipart/form-data" method="post">


Upload image:
<input id="image-file" type="file" name="file" />
<input type="submit" value="Upload" />




</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 2MiB.'
);
小开

我使用了一个主要的Javascript函数，它是我在Mozilla开发者网络站点https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications上找到的，以及另一个使用AJAX的函数，并根据我的需要进行更改。它接收到一个文档元素id，关于在我的html代码中我想写文件大小的地方。

<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">

然后，使用'size' javascript方法获取上传文件的大小:

<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>

这对我很管用。

小开

这很简单。

const oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>


if (oFile.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
小开

尽管问题已经有了答案，我还是想把我的答案贴出来。可能对以后的观众有用。您可以像下面的代码中那样使用它。

document.getElementById("fileinput").addEventListener("change",function(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 + " bytes\n" +
"starts with: " + contents.substr(1, contents.indexOf("\n"))
);
if (f.size > 5242880) {
alert('File size Greater then 5MiB!');
}




}
r.readAsText(f);
} else {
alert("Failed to load file");
}
})
<input type="file" id="fileinput" />

小开

适用于动态和静态文件元素

Javascript唯一解决方案

function validateSize(input) {
const fileSize = input.files[0].size / 1024 / 1024; // in MiB
if (fileSize > 2) {
alert('File size exceeds 2 MiB');
// $(file).val(''); //for clearing with Jquery
} else {
// Proceed further
}
}
<input onchange="validateSize(this)" type="file">

小开

JQuery在这个线程中提供的例子是非常过时的，谷歌没有任何帮助，所以这里是我的修订:

<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>
小开

我做了这样的东西:

$('#image-file').on('change', function() {
var numb = $(this)[0].files[0].size / 1024 / 1024;
numb = numb.toFixed(2);
if (numb > 2) {
alert('to big, maximum is 2MiB. You file size is: ' + numb + ' MiB');
} else {
alert('it okey, your file has ' + numb + 'MiB')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">

小开

我偶然遇到了这个问题，我需要的一行代码隐藏在大块的代码中。

简单回答:this.files[0].size

顺便说一下，不需要JQuery。

小开

简单的方法是

const myFile = document.getElementById("fileUpload").files[0];
if (myFIle.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
小开

我使用这个脚本来验证文件类型和大小

 var _validFilejpeg = [".jpeg", ".jpg", ".bmp", ".pdf"];


function validateForSize(oInput, minSize, maxSizejpeg) {
//if there is a need of specifying any other type, just add that particular type in var  _validFilejpeg
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFilejpeg.length; j++) {
var sCurExtension = _validFilejpeg[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length)
.toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}


if (!blnValid) {
alert("Sorry, this file is invalid, allowed extension is: " + _validFilejpeg.join(", "));
oInput.value = "";
return false;
}
}
}


fileSizeValidatejpeg(oInput, minSize, maxSizejpeg);
}


function fileSizeValidatejpeg(fdata, minSize, maxSizejpeg) {
if (fdata.files && fdata.files[0]) {
var fsize = fdata.files[0].size /1024; //The files property of an input element returns a FileList. fdata is an input element,fdata.files[0] returns a File object at the index 0.
//alert(fsize)
if (fsize > maxSizejpeg || fsize < minSize) {
alert('This file size is: ' + fsize.toFixed(2) +
"KB. Files should be in " + (minSize) + " to " + (maxSizejpeg) + " KB ");
fdata.value = ""; //so that the file name is not displayed on the side of the choose file button
return false;
} else {
console.log("");
}
}
}
<input type="file"  onchange="validateForSize(this,10,5000);" >


提交答案