JavaScript implementiert Client -Dateiauswahldatei und IMG -Tag -Lade -Client -Bild, um eine Bildvorschau zu erreichen.
Testbrowser: Firefox6, Firefox12, Chrom 25.0.1364.172 m, IE6-IE10 sind alle kompatibel
Safari5.0.4 unterstützt FileReader und File.files.Item (0) .GetAsDataurl -Methoden nicht. Es gibt vorerst keine Lösung. Sie müssen es auf den Server hochladen und den temporären Dateinamen zurückgeben und mit dem IMG -Tag laden. Ich weiß nicht, ob die nachfolgende Safari -Version FileReader -Objekte unterstützt.
IE10 Effekt:
IE9 -Effekte:
Quellcode implementieren:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "txt/html; charset = utf-8"/> <title> Javascript-Implementierung. IE6 ist IE6. Durch die Beurteilung des Benutzers ist nicht unbedingt genau, wenn (document.Alle) document.write ('<!-[wenn lte ie 6]> <script type = "text/javascript"> window.ie6 = true <// script> <! [Endif]->'); // var ie6 =/msie 6/i.test (navigator.useragent); // Nicht empfohlen, die IE6 -Benutzeragent einiger Systeme ist IE7- oder IE8 -Funktionsänderung (picid, fileId) {var pic = document.getElementById (picid); var file = document.getElementById (DateiId); if (window.FileReader) {// Chrome, Firefox7+, Opera, IE10, IE9, IE9 kann auch Filter verwenden, um OFREADER = new FileReader () zu implementieren; Ofreader.ReadasDataurl (Datei.files [0]); Ofreader.onload = function (ofrevent) {pic.src = of revent.target.result;}; } else if (document.all) {// ie8- file.select (); var ReallocalPath = document.Selection.Createrange (). Text // Erhalten Sie den tatsächlichen lokalen Dateipfad unter iE if (window.ie6) pic.src = ReallocalPath; // IE6 Browser setzt IMGs SRC auf den lokalen Pfad, um das Bild sonst direkt anzuzeigen. Der IE10 -Browser unterstützt keine Filter und muss Fileeader verwenden, um es zu implementieren. Achten Sie also darauf, dass FileReader First Pic.Style.Filter = "Progid: DimaMagetRansform.Microsoft.AlphaMageloader (Größenmethod = 'Image', Src =/" " + ReallocalPath +") "); pic.src = 'Daten: Bild/gif; Base64, r0lgodlhaqabaiaaap /// Waaach5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaicaeaOW =='; {// firefox6- if (file.files.Item (0)) {url = file.files.item (0) .getaSdataurl (); pic.src = url; }}} </script> </head> <body> <Formular name = "Form1" engType = "MultiPart/Form-Data"> <tabelle> <tr> <td> Sketch 1: </td> <td> <Eingabe type = "Datei" name = "file1" id = "Datei1". </td> <td> <img src = "bilder/px.gif" id = "pic1"> </td> </tr> <tr> <td> Skizze 2: </td> <td> <Eingabe type = "Datei" name = "file2" id = "Datei2" Onchange = "Änderung ('pic2', 'Datei2')") ")") ")") ")") ")" </td> <td> <td> "," Datei 2 ")") ")") ")") "</td> <td> <td>", "Datei 2") ")") ")") "</td> </td> <td> </td> <td> <img src = "bilder/px.gif" id = "pic2"> </td> </tr> </table> </form> </body> </html>