[英]JavaScript file upload size validation
有沒有辦法在使用 JavaScript 上傳文件之前檢查文件大小?
是的,您可以為此使用File 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,如果是,則給他們一個友好的消息(因此他們不會花費所有時間上傳只是為了在服務器上丟棄結果),但是您還必須在服務器上強制執行該限制,因為可以規避所有客戶端限制(和其他驗證)。
使用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 + "MiB");
});
</script>
</form>
適用於動態和靜態文件元素
僅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">
這很簡單。
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;
}
否
是,在較新的瀏覽器中使用 File API。 有關詳細信息,請參閱 TJ 的回答。
如果您還需要支持舊版瀏覽器,則必須使用基於 Flash 的上傳器(如SWFUpload或Uploadify)來執行此操作。
SWFUpload 功能演示展示了file_size_limit
設置的工作原理。
請注意,這(顯然)需要 Flash,而且它的工作方式與普通上傳表單略有不同。
如果您使用 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.'
);
我做了這樣的事情:
$('#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">
即使問題得到了回答,我還是想發布我的答案。 可能對未來的觀眾有用。你可以像下面的代碼一樣使用它。
<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 5MiB!');
}
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
我使用了在 Mozilla 開發者網絡站點https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications 上找到的一個主要 Javascript 函數,以及帶有 AJAX 的另一個函數,並根據我的需要進行了更改。 它接收一個文檔元素 ID,該 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>
干杯
此線程中提供的 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>
你可以試試這個fineuploader
它在 IE6(及更高版本)、Chrome 或 Firefox 下運行良好
我遇到了這個問題,我需要的一行代碼隱藏在大塊代碼中。
簡短回答: this.files[0].size
順便說一下,不需要 JQuery。
我使用這個腳本來驗證文件類型和大小
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);" >
簡單的方法是
const myFile = document.getElementById("fileUpload").files[0];
if (myFIle.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
如果您將 Ie 'Document Mode' 設置為 'Standards',您可以使用簡單的 javascript 'size' 方法來獲取上傳文件的大小。
將“文檔模式”設置為“標准”:
<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>
這個對我有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.