Propre à IE : Source : kavoir.com
Propre à FF3 :Source : ab-d.fr
___________________________
1ere solution :
Check for file size with JavaScript before uploading
Posted by Yang Yang
File uploading is a rather common feature of interactive sites. As all servers come with a limit on the size of the file being uploaded, it would be a usability blessing for users if web developers can implement a logic to check for the file size before uploading, informing the user if the size of the file exceeds the max.
At the server side, it’s easy to weigh the file in bytes, with PHP, ASP or JSP. However it would be waste of resources if one can only check the size of the file that has already been uploaded because there’s no point to it if he is trying to inform the user if the file is too large.
So can this be done on the client side?
Yes, but partially and indecently. JavaScript is built with client safety in mind thus given no clearance to access client file system, falling unable to get the size of any chosen file. VBScript, on the other hand, can return the size of any client file with the help of ActiveX Object, the Microsoft proprietary scripting API.
Consider the code below:
<head> <script> function getSize() {
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>
Rather gross and obselete code with regard to modern front end coding standards, though it does the job. Run it on IE, select a file and click “Size?”, the browser alerts with the size of the file.
It’s the only way I know as of now that successfully checks the size of a given file completely on client side.
______________________________________________________
2e solution :
Firefox 3 et input type=file Nouvelle Formule ! ( upload, path, nsIDOMFile )
De bon matin, je me lève, j'arrive sur une de mes applications en ligne, et là horreur ! cette dernière ne fonctionne plus sous Mozilla Firefox 3... Après analyse des petits messages d'erreurs, je me rends à l'évidence le formulaire
<input type="file" /> ne se comporte plus de la même façon... Les développeurs de Firefox 3 ont corrigé une petite faille de sécurité : Lorsque vous cliquez sur le bouton Parcourir le value de votre zone input type="file" contenait le nom du fichier ainsi que son chemin sur le disque dur, et bien aujourd'hui cela n'est plus, vous n'aurez plus que le nom du fichier.
D'ailleurs, Opera Browser se comporte aussi de la sorte, pour le moment Microsoft Internet Explorer et Apple Safari retournent toujours le chemin complet du fichier.
Une très bonne nouvelle s'accompagne de ce petit changement, vous pouvez à présent accéder aux données du fichier sélectionné par l'utilisateur en Javascript sans poster le formulaire grâce à l'objet FileList.
Un exemple vaut mieux qu'un long discours, voici une page qui vous permettra d'essayer cette nouvelle fonctionnalité (qui je le rappelle, ne fonctionne que sur Mozilla Firefox 3) :
Documentation officielle :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type=file & Firefox 3</title>
</head>
<body>
<h1>input type=file & Firefox 3</h1>
<script type="text/javascript">
// <![CDATA[ function inputFileOnChange() {
var v_console = '';
v_console += 'value: ' + document.getElementById('fichier').value;
v_console += '<br \/>';
if(document.getElementById('fichier').files) {
// Support: nsIDOMFile, nsIDOMFileList
v_console += 'files.length: ' + document.getElementById('fichier').files.length;
v_console += '<br \/>';
v_console += 'fileName: ' + document.getElementById('fichier').files.item(0).fileName;
v_console += '<br \/>';
v_console += 'fileSize: ' + document.getElementById('fichier').files.item(0).fileSize;
v_console += '<br \/>';
v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsDataURL();
// v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsBinary();
// v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsText();
v_console += '<br \/>';
};
document.getElementById('console').innerHTML = v_console;
};
// ]]>
</script><div>
<input type="file" name="fichier" id="fichier" onchange="inputFileOnChange();" />
<br /><br />
<code id="console">...console...</code> </div>
</body>
</html>
• http://developer.mozilla.org/en/docs/nsIDOMFile
• http://developer.mozilla.org/en/docs/nsIDOMFileList
• http://www.w3.org/TR/file-upload/
Aucun commentaire:
Enregistrer un commentaire