JavaScript mengimplementasikan file pemilihan file klien dan tag IMG memuat gambar klien untuk mencapai pratinjau gambar.
Test Browser: Firefox6, Firefox12, Chrome 25.0.1364.172 m, IE6-IE10 semuanya kompatibel
safari5.0.4 tidak mendukung filereader dan file.files.item (0) .getasDataurl metode. Tidak ada solusi untuk saat ini. Anda perlu mengunggahnya ke server dan mengembalikan nama file sementara dan memuatnya dengan tag IMG. Saya tidak tahu apakah versi Safari berikutnya mendukung objek filereader.
IE10 Efek:
IE9 Efek:
Menerapkan kode sumber:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "txt/html; charset = UTF-8"/<title> JAVASCRIPT IMPRIPLEM IE, Firefix Previews IMACIET 6 IE6. Dengan menilai bahwa UserAgent tidak selalu akurat jika (Document.all) document.write ('<!-[jika LTE IE 6]> <script type = "text/javascript"> window.ie6 = true <// script> <! [Endif]->'); // var ie6 =/msie 6/i.test (navigator.useragent); // tidak disarankan, beberapa sistem 'ie6 userAgent akan menjadi IE7 atau IE8 Function Change (picid, FileID) {var pic = document.getElementById (picid); var file = document.getElementById (fileId); if (window.filereader) {// chrome, firefox7+, opera, ie10, ie9, IE9 juga dapat menggunakan filter untuk mengimplementasikan rader = 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 // dapatkan jalur file lokal yang sebenarnya di bawah IE if (window.ie6) pic.src = reallocalpath; // IE6 Browser menetapkan IMG's SRC ke jalur lokal untuk secara langsung menampilkan gambar lain {// Versi IE6 dari IE secara langsung mengatur IMG's SRC tidak dapat menampilkan gambar lokal karena masalah keamanan, tetapi dapat diimplementasikan melalui filter. Browser IE10 tidak mendukung filter dan perlu menggunakan filereader untuk mengimplementasikannya. Jadi harap berhati -hati untuk menilai filereader pertama pic.style.filter = "progid: dximagetransform.microsoft.alphaimageloader (sizingMethod = 'gambar', src =/" " + reallocalpath +"/")"; pic.src = 'data: gambar/gif; base64, r0lgodlhaqabaiaaap /// waaach5baeaaaaaaaaaaaaaaaaaaaaaicraicraeAow =='; // setel src iMG ke gambar transparan yang disandikan oleh base64, dan tidak akan ditampilkan oleh base64, dan tidak ada yang ditampilkan oleh base64, dan no. {// 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"> <able> <tr> <td> sketsa 1: </td> <td> <input type = "file" name = "file1" id = "file1" onchange = "ubah ('pic1,', 'name =" File1) </fILE1 "ONCHANGE =" Ubah (' PIC1, ' </td> <td> <img src = "gambar/px.gif" id = "pic1"> </td> </tr> <tr> <td> sketsa 2: </td> <td> <input type = "file" name = "file2" id = "file2" onchange = "ubah ('pic2', 'name =" file2 "id =" file2 "onchange =" ubah (' pic2 ',' </td> <td> <img src = "gambar/px.gif" id = "pic2"> </td> </tr> </able> </form> </body> </html>