Validation de la taille de téléchargement du fichier JavaScript
y a-t-il un moyen de vérifier Taille du fichier avant de le télécharger en utilisant JavaScript?
12 réponses
Oui , il y a une nouvelle fonctionnalité du W3C qui est prise en charge par certains navigateurs modernes, le File API . Il peut être utilisé à cette fin, et il est facile de vérifier s'il est supporté et de retomber (si nécessaire) sur un autre mécanisme si ce n'est pas le cas.
voici un exemple complet:
<!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>
et ici il est en action. Essayer avec une version récente de Chrome ou Firefox.
légèrement hors sujet, mais: notez que la validation côté client est aucun substitut pour la validation côté serveur. La validation côté Client est purement pour permettre d'offrir une expérience utilisateur plus agréable. Par exemple, si vous n'autorisez pas le téléchargement d'un fichier de plus de 5 Mo, vous pouvez utiliser la validation côté client pour vérifier que le fichier que l'Utilisateur a choisi n'a pas plus de 5 Mo de taille et leur donner un message convivial s'il is (de sorte qu'ils ne passent pas tout ce temps à télécharger uniquement pour obtenir le résultat jeté sur le serveur), mais vous devez aussi forcer cette limite sur le serveur, car toutes les limites côté client (et autres validations) peuvent être contournées.
utilisant 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>
œuvres pour élément de fichier dynamique et statique
Javascript Seule Solution
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"> Non Oui, en utilisant L'API fichier dans les navigateurs plus récents. Voir la réponse de TJ pour plus de détails.
si vous avez besoin de prendre en charge des navigateurs plus anciens, vous devrez utiliser un uploader basé sur Flash comme SWFUpload ou Uploadify pour ce faire.
le Démo montre comment fonctionne le paramètre file_size_limit .
noter que ce (évidemment) a besoin de Flash, plus la façon dont il fonctionne est un peu différent des formes normales de téléchargement.
si vous utilisez la Validation jQuery, vous pouvez écrire quelque chose comme ceci:
$.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.'
);
c'est assez simple.
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;
}
j'utilise une des principales fonctions Javascript que j'ai trouvé sur le site de Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications , ainsi qu'une autre fonction avec AJAX et changé en fonction de mes besoins. Il reçoit un id d'élément de document concernant l'endroit dans mon code html où je veux écrire la taille du fichier.
<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>
Cheers
même si la question Est répondue, je voulais poster ma réponse. Ça pourrait servir aux futurs téléspectateurs.Vous pouvez l'utiliser comme dans le code suivant.
<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 exemple fourni dans ce fil était extrêmement obsolète, et google n'a pas été utile du tout, donc voici ma révision:
<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>
vous pouvez essayer ce fineuploader
Il fonctionne très bien sous IE6(et avove), Chrome ou Firefox
j'ai fait quelque chose comme ça:
$('#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');
} 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">si vous définissez le "mode Document" À "Standards", vous pouvez utiliser la méthode javascript simple "size" pour obtenir la taille du fichier téléchargé.
définit le Ie 'Document Mode' À 'Standards':
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
que, Utilisez la méthode javascript "taille" pour obtenir la taille du fichier téléchargé:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>
ça me va.