Obtenir la taille du fichier avant le téléchargement
Est-il possible de connaître la taille du fichier avant de le télécharger en utilisant AJAX/PHP dans l'événement change du fichier d'entrée?
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:
<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, du code de validation conceptuelle pour glisser-déposer des fichiers dans FormData et les télécharger via POST sur un serveur. Il comprend une vérification simple de la taille du fichier.
J'ai eu le même problème et 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 enfin trouvé la réponse. Voici mon code pour obtenir un fichier joint avec jQuery:
var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);
Ceci est juste l'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);
}
}
UPDATE: Nous allons utiliser cette fonction pour vérifier si c'est le 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;
}
Les navigateurs prenant en charge HTML5 ont la propriété files pour le type d'entrée. Bien sûr, cela ne fonctionnera pas dans les anciennes versions 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);
}
$(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>vous devez faire une demande 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"));
}
});
N'utilisez pas ActiveX car il est fort probable qu'il affichera un message d'avertissement effrayant dans Internet Explorer et dissuadera vos utilisateurs.
Si quelqu'un souhaite mettre en œuvre cette vérification, il ne doit s'appuyer que sur l'objet FileList disponible dans les navigateurs modernes et sur les vérifications côté serveur uniquement pour les anciens navigateurs ( progressive enhancement ).
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;
}
la solution ucefkh fonctionnait mieux, mais comme $ .browser était obsolète dans jQuery 1.91, il a fallu 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 pouvez utiliser 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 de base utilisé) pour les anciens navigateurs.
Personnellement, je dirais la réponse de Web World est le meilleur aujourd'hui, compte tenu des normes HTML. Si vous devez prendre en charge IE <10, vous devrez utiliser une forme quelconque d’ActiveX. J'éviterais les recommandations qui impliquent de coder contre Scripting.FileSystemObject ou d'instancier directement ActiveX.
Dans ce cas, j'ai utilisé des bibliothèques JS tierces telles que plupload qui peuvent être configurées pour utiliser les contrôles HTML5 ou Flash/Silverlight afin de remplacer les navigateurs qui ne les prennent pas en charge. Plupload a une API côté client pour vérifier la taille de fichier qui fonctionne dans IE <10.
Vous pouvez utiliser la fonction de taille de fichier PHP. Pendant le téléchargement en utilisant ajax, vérifiez d'abord la taille du fichier en faisant une requête une requête ajax au script php qui vérifie la taille du fichier et renvoie la valeur.