มีวิธีใดบ้างในการตรวจสอบขนาดไฟล์ก่อนทำการอัพโหลดโดยใช้ JavaScript?
มีวิธีใดบ้างในการตรวจสอบขนาดไฟล์ก่อนทำการอัพโหลดโดยใช้ JavaScript?
คำตอบ:
ใช่มีคุณลักษณะใหม่จาก W3C ที่ได้รับการสนับสนุนจากเบราว์เซอร์ที่ทันสมัยบางไฟล์ 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>และที่นี่มันมีการใช้งานจริง ลองใช้ด้วย Chrome หรือ Firefox เวอร์ชันล่าสุด
ปิดหัวข้อเล็กน้อย แต่: โปรดทราบว่าการตรวจสอบความถูกต้องฝั่งไคลเอ็นต์นั้นไม่สามารถทดแทนการตรวจสอบความถูกต้องฝั่งเซิร์ฟเวอร์ได้ การตรวจสอบฝั่งไคลเอ็นต์นั้นมีจุดประสงค์เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีกว่า ตัวอย่างเช่นหากคุณไม่อนุญาตให้อัปโหลดไฟล์เกิน 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 + "MB");
});
</script>
</form>MiB 1024
ใช้ได้กับองค์ประกอบไฟล์แบบไดนามิกและแบบคงที่
โซลูชัน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">sizeคุณสมบัติ
$(obj).files[0].size/1024/1024; แต่เปลี่ยนเป็นobj.files[0].size/1024/1024;
ไม่ใช่ใช้ File API ในเบราว์เซอร์ที่ใหม่กว่า ดูคำตอบของ TJ สำหรับรายละเอียด
หากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าเช่นกันคุณจะต้องใช้โปรแกรมอัปโหลดแบบ Flash เช่นSWFUploadหรือUploadifyเพื่อทำสิ่งนี้
การสาธิตคุณสมบัติ SWFUploadแสดงให้เห็นว่าการfile_size_limitตั้งค่าทำงานอย่างไร
โปรดทราบว่าจำเป็นต้องใช้ Flash (เห็นได้ชัด) รวมถึงวิธีการทำงานที่แตกต่างจากรูปแบบการอัพโหลดปกติ
มันค่อนข้างง่าย
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;
}หากคุณใช้การตรวจสอบ 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.'
);ฉันทำอะไรแบบนั้น
$('#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 2MB. You file size is: ' + numb +' MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">ฉันใช้ฟังก์ชั่น Javascript หลักหนึ่งที่ฉันพบที่ไซต์ Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_applicationsพร้อมกับฟังก์ชั่นอื่นที่มี AJAX และเปลี่ยนแปลงตามความต้องการของฉัน ได้รับรหัสองค์ประกอบเอกสารเกี่ยวกับสถานที่ในรหัส 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>ไชโย
แม้ว่าคำถามจะได้รับคำตอบ แต่ฉันต้องการโพสต์คำตอบของฉัน อาจเป็นประโยชน์กับผู้ชมในอนาคตคุณสามารถใช้มันได้ในรหัสต่อไปนี้
<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");
}
}ตัวอย่าง JQuery ที่ให้ไว้ในเธรดนี้ล้าสมัยไปมากและ Google ก็ไม่ได้เป็นประโยชน์เลยนี่คือการแก้ไขของฉัน:
<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>คุณสามารถลองตัวอัปโหลดโหลดนี้
ใช้งานได้ดีภายใต้ IE6 (ขึ้นไป), Chrome หรือ Firefox
หากคุณตั้งค่า Ie 'Document Mode' เป็น 'Standard' คุณสามารถใช้ javascript แบบง่าย ๆ ในการกำหนดขนาดของไฟล์ที่อัพโหลด
ตั้งค่า 'โหมดเอกสาร' ของ Ie เป็น 'มาตรฐาน':
<meta http-equiv="X-UA-Compatible" content="IE=Edge">กว่าใช้วิธี 'ขนาด' จาวาสคริปต์เพื่อรับขนาดไฟล์ที่อัปโหลด:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>มันใช้งานได้สำหรับฉัน