JavaScript implémente le fichier de sélection du fichier client et l'image client de chargement de balise IMG pour réaliser l'aperçu de l'image.
Browsers de test: Firefox6, Firefox12, Chrome 25.0.1364.172 M, IE6-IE10 sont tous compatibles
Safari5.0.4 ne prend pas en charge FileReader et file.files.item (0) .getasdataurl Méthodes. Il n'y a pas de solution pour le moment. Vous devez le télécharger sur le serveur et renvoyer le nom de fichier temporaire et le charger avec la balise IMG. Je ne sais pas si la version Safari suivante prend en charge les objets FileReader.
Effet IE10:
IE9 Effets:
Implémenter le code source:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éadf> <méta http-equiv = "contenu-type" contenu = "txt / html; charset = utf-8" /> <ititle> javascript implémente ie, firefox Image Aperpiew </ title> <prit> <script> IE6 est IE6. En jugeant que UserAgent n'est pas nécessairement précis si (document.all) document.write ('<! - [if lte ie 6]> <script type = "text / javascript"> window.ie6 = true <// script> <! [Endif] ->'); // var ie6 = / msie 6 / i.test (Navigator.UserAgent); // Non recommandé, certains systèmes IE6 UserAgent seront IE7 ou IE8 Changement de fonction (PICID, FileID) {var pic = document.getElementById (PICID); var file = document.getElementById (fileId); if (window.fileReader) {// chrome, firefox7 +, opéra, ie10, ie9, ie9 peut également utiliser des filtres pour implémenter OFReader = new FileReader (); ofreader.readasdataurl (file.files [0]); ofreader.onload = function (ofRevent) {pic.src = ofRevent.target.result;}; } else if (document.all) {// ie8- file.select (); var realLocalPath = document.selection.createrange (). text // obtenez le chemin de fichier local réel sous IE if (window.ie6) pic.src = realLocalPath; // Le navigateur IE6 définit SRC d'IMG sur le chemin local pour afficher directement l'image ELLER {// IE6 La version d'IE définit directement SRC d'IMG ne peut pas afficher l'image locale en raison de problèmes de sécurité, mais il peut être implémenté via des filtres. Le navigateur IE10 ne prend pas en charge les filtres et doit utiliser FileReader pour l'implémenter. Veuillez donc faire attention à juger ce fichier First pic.style.filter = "Progid: dximageTransform.microsoft.alphaimageLoader (sizeMethod = 'image', src = /" "+ reallocalPath +" / ")"; pic.src = 'data: image / gif; base64, r0lgodlhaqabaiaaap /// waaach5baeaaaaaaaaaaaaaaaaaaaaaaicraeaow =='; // set iMg's src sur une image transparente en vue de la base64 et ne montrera pas le rouge xx}} {// firefox6- if (file.files.item (0)) {url = file.files.item (0) .getAsDataurl (); pic.src = url; }}} </ script> </ head> <body> <form name = "Form1" EncType = "multipart / form-data"> <s table> <tr> <td> sketch 1: </td> <td> <entrée type = "file" name = "file1" id = "file1" onchange = "Change ('pic1', 'file1')"> </td> </td> <td> <img src = "images / px.gif" id = "pic1"> </td> </ tr> <tr> <td> sketch 2: </td> <td> <input type = "file" name = "file2" id = "file2" onchange = "change ('pic2', 'file2')"> </ td> </td> <td> <img src = "images / px.gif" id = "pic2"> </td> </tr> </s table> </ form> </body> </html>