Existe-t-il un moyen de connaître la taille du fichier avant de télécharger le fichier en utilisant AJAX / PHP en cas de changement du fichier d'entrée?
Existe-t-il un moyen de connaître la taille du fichier avant de télécharger le fichier en utilisant AJAX / PHP en cas de changement du fichier d'entrée?
Réponses:
Pour le HTML ci-dessous
<input type="file" id="myFile" />
essayez ce qui suit:
//binds to onchange event of your input field
$('#myFile').bind('change', function() {
//this.files[0].size gets the size of your file.
alert(this.files[0].size);
});
Voir le fil suivant:
FileList.files
est un tableau ressemblant à des File
objets, ce qui est une extension de Glob
. Et selon la spécification , Glob
définit en effet la size
propriété comme le nombre d' octets (0 pour un fichier vide). Alors oui, le résultat est en octets .
<script type="text/javascript">
function AlertFilesize(){
if(window.ActiveXObject){
var fso = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.getElementById('fileInput').value;
var thefile = fso.getFile(filepath);
var sizeinbytes = thefile.size;
}else{
var sizeinbytes = document.getElementById('fileInput').files[0].size;
}
var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}
alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>
<input id="fileInput" type="file" onchange="AlertFilesize();" />
Travailler sur IE et FF
Voici un exemple simple d'obtention de la taille d'un fichier avant le téléchargement. Il utilise jQuery pour détecter chaque fois que le contenu est ajouté ou modifié, mais vous pouvez toujours obtenir files[0].size
sans utiliser jQuery.
$(document).ready(function() {
$('#openFile').on('change', function(evt) {
console.log(this.files[0].size);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
<input id="openFile" name="img" type="file" />
</form>
Voici un exemple plus complet, une preuve de code de concept pour glisser-déposer des fichiers dans FormData et les télécharger via POST sur un serveur. Il comprend une simple vérification de la taille du fichier.
J'ai eu le même problème et il semble que nous n'avons pas eu de solution précise. J'espère que cela peut aider d'autres personnes.
Après avoir pris le temps d'explorer, j'ai finalement trouvé la réponse. Voici mon code pour obtenir une pièce jointe avec jQuery:
var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);
Ceci est juste un exemple de code pour obtenir la taille du fichier. Si vous voulez faire d'autres choses, n'hésitez pas à changer le code pour satisfaire vos besoins.
Meilleure solution fonctionnant sur tous les navigateurs;)
function GetFileSize(fileid) {
try {
var fileSize = 0;
// for IE
if(checkIE()) { //we could use this $.browser.msie but since it's deprecated, we'll use this function
// before making an object of ActiveXObject,
// please make sure ActiveX is enabled in your IE browser
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
var filePath = $("#" + fileid)[0].value;
var objFile = objFSO.getFile(filePath);
var fileSize = objFile.size; //size in b
fileSize = fileSize / 1048576; //size in mb
}
// for FF, Safari, Opeara and Others
else {
fileSize = $("#" + fileid)[0].files[0].size //size in b
fileSize = fileSize / 1048576; //size in mb
}
alert("Uploaded File Size is" + fileSize + "MB");
}
catch (e) {
alert("Error is :" + e);
}
}
MISE À JOUR: Nous utiliserons cette fonction pour vérifier si c'est un navigateur IE ou non
function checkIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
// If Internet Explorer, return version number
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
} else {
// If another browser, return 0
alert('otherbrowser');
}
return false;
}
$(document).ready(function() {
$('#openFile').on('change', function(evt) {
console.log(this.files[0].size);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
<input id="openFile" name="img" type="file" />
</form>
Les navigateurs prenant en charge HTML5 ont des propriétés de fichiers pour le type d'entrée. Cela ne fonctionnera bien sûr pas dans les anciennes versions d'IE.
var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) {
var size = inpFiles.files.item(i).size;
alert("File Size : " + size);
}
La solution d'ucefkh fonctionnait mieux, mais comme $ .browser était obsolète dans jQuery 1.91, a dû changer pour utiliser navigator.userAgent:
function IsFileSizeOk(fileid) {
try {
var fileSize = 0;
//for IE
if (navigator.userAgent.match(/msie/i)) {
//before making an object of ActiveXObject,
//please make sure ActiveX is enabled in your IE browser
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
var filePath = $("#" + fileid)[0].value;
var objFile = objFSO.getFile(filePath);
var fileSize = objFile.size; //size in b
fileSize = fileSize / 1048576; //size in mb
}
//for FF, Safari, Opeara and Others
else {
fileSize = $("#" + fileid)[0].files[0].size //size in b
fileSize = fileSize / 1048576; //size in mb
}
return (fileSize < 2.0);
}
catch (e) {
alert("Error is :" + e);
}
}
vous devez faire une requête ajax HEAD pour obtenir la taille du fichier. avec jquery c'est quelque chose comme ça
var req = $.ajax({
type: "HEAD",
url: yoururl,
success: function () {
alert("Size is " + request.getResponseHeader("Content-Length"));
}
});
Veuillez ne pas l'utiliser ActiveX
car il y a de fortes chances qu'il affiche un message d'avertissement effrayant dans Internet Explorer et effraie vos utilisateurs.
Si quelqu'un souhaite implémenter cette vérification, il ne doit s'appuyer que sur l' objet FileList disponible dans les navigateurs modernes et se fier aux contrôles côté serveur uniquement pour les navigateurs plus anciens ( amélioration progressive ).
function getFileSize(fileInputElement){
if (!fileInputElement.value ||
typeof fileInputElement.files === 'undefined' ||
typeof fileInputElement.files[0] === 'undefined' ||
typeof fileInputElement.files[0].size !== 'number'
) {
// File size is undefined.
return undefined;
}
return fileInputElement.files[0].size;
}
Vous pouvez en utilisant l'API de fichier HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Cependant, vous devriez toujours avoir une solution de secours pour PHP (ou tout autre langage d'arrière-plan que vous utilisez) pour les navigateurs plus anciens.
Personnellement, je dirais la réponse de Web World est la meilleure aujourd'hui, compte tenu des normes HTML. Si vous devez prendre en charge IE <10, vous devrez utiliser une forme d'ActiveX. J'éviterais les recommandations qui impliquent le codage contre Scripting.FileSystemObject, ou l'instanciation directe d'ActiveX.
Dans ce cas, j'ai eu du succès en utilisant des bibliothèques JS tierces telles que plupload qui peuvent être configurées pour utiliser des apis HTML5 ou des contrôles Flash / Silverlight pour remplir les navigateurs qui ne les prennent pas en charge. Plupload a une API côté client pour vérifier la taille du fichier qui fonctionne dans IE <10.