JavaScript 파일 업로드 크기 확인
JavaScript를 사용하여 업로드하기 전에 파일 크기를 확인할 수 있는 방법이 있습니까?
예, 파일 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를 넘지 않는지 확인하고, 사이즈가 5MB를 넘지 않는 경우(따라서 업로드에 시간을 소비하지 않고 서버에서 폐기된 결과를 얻을 수 있음)에 알기 쉬운 메시지를 표시할 수 있습니다.단, 그 li도 실행해야 합니다.모든 클라이언트 측 제한(및 기타 검증)을 회피할 수 있으므로 서버에서 mit를 실행합니다.
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>동적 및 정적 파일 요소에 대해 작동
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;
}
아니요. 예, 새로운 브라우저에서 파일 API를 사용합니다.상세한 것에 대하여는, TJ의 회답을 참조해 주세요.
오래된 브라우저도 지원해야 하는 경우 SWFUpload 또는 Uploadify와 같은 플래시 기반 업로더를 사용해야 합니다.
SWFUpload 기능의 데모에서는, 다음과 같은 기능이 어떻게 동작하는지를 참조해 주세요.file_size_limit설정이 기능합니다.
여기에는 플래시가 필요합니다(분명히).또한 일반 업로드 양식과는 동작 방식이 조금 다릅니다.
jQuery Validation을 사용하는 경우 다음과 같이 쓸 수 있습니다.
$.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">질문에 답했지만, 저는 답을 올리고 싶었습니다.미래의 시청자들에게 유용할 수도 있다.아래 코드와 같이 사용할 수 있습니다.
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" />Mozilla Developer Network 사이트 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications,에서 찾은 Javascript의 메인 기능과 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>
건배.
이 스레드에 제시된 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에서는 정상적으로 동작합니다.
우연히 이 질문을 받았는데, 제가 필요로 하는 한 줄의 코드는 큰 코드 블록에 숨어있는 것이었습니다.
단한 short short: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);" >Ie 'Document Mode'를 'Standards'로 설정하면 간단한 javascript 'size' 방식으로 업로드한 파일의 크기를 얻을 수 있습니다.
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 myFile = document.getElementById("fileUpload").files[0];
if (myFIle.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
언급URL : https://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation
'IT' 카테고리의 다른 글
| Python을 사용하여 touch를 구현하시겠습니까? (0) | 2022.12.27 |
|---|---|
| 할당 후 예기치 않게 변경되지 않도록 목록을 복제하려면 어떻게 해야 합니까? (0) | 2022.12.27 |
| navigator.geolocation.getCurrentPosition이 작동하지 않을 수 있음 (0) | 2022.12.27 |
| PHP의 MariaDB에서 정보 가져오기 (0) | 2022.12.27 |
| javax.servlet 가져오기를 확인할 수 없습니다. (0) | 2022.12.27 |