Yanıtlar:
Evet , W3C'den bazı modern tarayıcılar olan Dosya API'sı tarafından desteklenen yeni bir özellik var . Bu amaçla kullanılabilir ve desteklenip desteklenmediğini test etmek ve (gerekirse) başka bir mekanizmaya geri düşmek kolaydır.
İşte tam bir örnek:
<!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>Ve işte burada . Bunu Chrome veya Firefox'un son sürümleriyle deneyin.
Biraz konu dışı, ancak: İstemci tarafı doğrulamanın sunucu tarafı doğrulamanın yerini tutmayacağını unutmayın. İstemci tarafı doğrulaması yalnızca daha iyi bir kullanıcı deneyimi sunmayı mümkün kılmak içindir. Örneğin, 5 MB'tan daha büyük bir dosyanın yüklenmesine izin vermezseniz, kullanıcının seçtiği dosyanın 5 MB'tan büyük olmadığını kontrol etmek için istemci tarafı doğrulamayı kullanabilirsiniz ve varsa hoş bir mesaj verebilirsiniz. (bu nedenle, yalnızca sunucuda atılan sonucu elde etmek için bu kadar zaman yüklemeye harcamazlar), ancak tüm istemci tarafı sınırlarının (ve diğer doğrulamaların) atlanabileceğinden, bu sınırı sunucuda da uygulamanız gerekir .
Jquery kullanarak:
<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>MiBTabanı hesaplarsanız olmalıdır 1024.
Dinamik ve Statik Dosya Öğesi için Çalışır
Yalnızca Javascript Çözümü
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özelliğini kullanarak
$(obj).files[0].size/1024/1024; Ama bunu değiştirdiobj.files[0].size/1024/1024;
Hayır Evet, daha yeni tarayıcılarda Dosya API'sini kullanma. Ayrıntılar için TJ'nin cevabına bakınız.
Eski tarayıcıları da desteklemeniz gerekiyorsa, bunu yapmak için SWFUpload veya Uploadify gibi Flash tabanlı bir yükleyici kullanmanız gerekecektir .
SWFUpload Demo Özellikleri nasıl gösterir file_size_limitayarı çalışır.
Bunun (açıkçası) Flash'a ihtiyacı olduğunu ve ayrıca çalışma şeklinin normal yükleme formlarından biraz farklı olduğunu unutmayın.
Oldukça basit.
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 Validation kullanıyorsanız, şöyle bir şey yazabilirsiniz:
$.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.'
);Ben böyle bir şey yaptım:
$('#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">Ben https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications ile birlikte Mozilla Developer Network sitesinde bulduğum ve AJAX ile değiştirdiğim bir ana Javascript işlevi kullanıyorum ve ihtiyaçlarıma göre değişti. Dosya boyutunu yazmak istediğim html kodumdaki yere ilişkin bir belge öğesi kimliği alır.
<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>Şerefe
Soru cevaplanmasına rağmen cevabımı göndermek istedim. Gelecekteki izleyiciler için kullanışlı olabilir.Aşağıdaki kodda olduğu gibi kullanabilirsiniz.
<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");
}
}Bu konuda sağlanan JQuery örneği son derece eski ve google hiç yardımcı olmadı, bu yüzden burada benim revizyon:
<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>Bu ince yükleyiciyi deneyebilirsiniz
IE6 (ve üstü), Chrome veya Firefox altında iyi çalışır
Ie 'Doküman Modu'nu' Standartlar 'olarak ayarlarsanız, yüklenen dosyanın boyutunu almak için basit javascript' size 'yöntemini kullanabilirsiniz.
Ie 'Belge Modu'nu' Standartlar'a ayarlayın:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">Daha sonra, yüklenen dosyanın boyutunu almak için 'size' javascript yöntemini kullanın:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>Benim için çalışıyor.