Odpowiedzi:
Tak , nowa funkcja W3C jest obsługiwana przez niektóre nowoczesne przeglądarki, File API . Można go w tym celu wykorzystać i łatwo jest sprawdzić, czy jest obsługiwany, i w razie potrzeby wrócić do innego mechanizmu, jeśli nie jest.
Oto kompletny przykład:
<!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>I tutaj jest w akcji. Wypróbuj to w najnowszej wersji Chrome lub Firefox.
Nie na temat, ale: Zwróć uwagę, że sprawdzanie poprawności po stronie klienta nie zastępuje sprawdzania poprawności po stronie serwera. Sprawdzanie poprawności po stronie klienta służy wyłącznie zapewnieniu lepszej obsługi. Na przykład, jeśli nie zezwalasz na przesyłanie pliku większego niż 5 MB, możesz użyć weryfikacji po stronie klienta, aby sprawdzić, czy plik wybrany przez użytkownika nie ma więcej niż 5 MB i przekazać mu miłą, przyjazną wiadomość, jeśli jest (więc nie spędzają całego czasu na przesyłaniu tylko po to, aby wynik został wyrzucony na serwer), ale należy również egzekwować ten limit na serwerze, ponieważ można ograniczyć wszystkie limity po stronie klienta (i inne walidacje).
Za pomocą 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>MiBjeśli obliczasz do podstawy 1024.
Działa dla dynamicznego i statycznego elementu pliku
Rozwiązanie tylko dla 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">sizewłaściwości
$(obj).files[0].size/1024/1024; Ale zmieniłem to naobj.files[0].size/1024/1024;
Nie Tak, używając interfejsu API plików w nowszych przeglądarkach. Szczegółowe informacje można znaleźć w odpowiedzi TJ.
Jeśli potrzebujesz również obsługiwać starsze przeglądarki, musisz użyć do tego celu programu do przesyłania plików Flash, takiego jak SWFUpload lub Uploadify .
SWFUpload Funkcje Demo pokazuje, jak file_size_limitdziała ustawienie.
Pamiętaj, że to (oczywiście) wymaga Flasha, a sposób jego działania różni się nieco od zwykłych formularzy przesyłania.
To całkiem proste.
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;
}Jeśli używasz jQuery Validation, możesz napisać coś takiego:
$.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.'
);Zrobiłem coś takiego:
$('#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">Używam jednej głównej funkcji Javascript, którą znalazłem na stronie Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications , wraz z inną funkcją AJAX i zmieniłem ją zgodnie z moimi potrzebami. Otrzymuje identyfikator elementu dokumentu dotyczący miejsca w moim kodzie HTML, w którym chcę zapisać rozmiar pliku.
<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>Twoje zdrowie
Mimo odpowiedzi na pytanie chciałem opublikować swoją odpowiedź. Może się przydać przyszłym użytkownikom. Możesz użyć go jak w poniższym kodzie.
<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");
}
}Przykład JQuery podany w tym wątku był bardzo nieaktualny, a Google nie był w ogóle pomocny, więc oto moja wersja:
<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>Możesz wypróbować ten fineuploader
Działa dobrze pod IE6 (i nowszymi), Chrome lub Firefox
Jeśli ustawisz Ie „Tryb dokumentu” na „Standardy”, możesz użyć prostej metody „size” javascript, aby uzyskać rozmiar przesyłanego pliku.
Ustaw Ie „Tryb dokumentu” na „Standardy”:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">Następnie użyj metody javascript „rozmiar”, aby uzyskać rozmiar przesłanego pliku:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>Mi to pasuje.