JavaScript ใช้ไฟล์การเลือกไฟล์ไคลเอนต์และ IMG Tag Load Image เพื่อให้ได้ภาพตัวอย่างภาพ
ทดสอบเบราว์เซอร์: Firefox6, Firefox12, Chrome 25.0.1364.172 M, IE6-IE10
Safari5.0.4 ไม่สนับสนุน Filereader และ File.files.item (0). getAsdataurl วิธีการ ไม่มีวิธีแก้ปัญหาในขณะนี้ คุณต้องอัปโหลดไปยังเซิร์ฟเวอร์และส่งคืนชื่อไฟล์ชั่วคราวและโหลดด้วยแท็ก IMG ฉันไม่ทราบว่าเวอร์ชัน Safari ที่ตามมารองรับวัตถุ FileReader หรือไม่
เอฟเฟกต์ IE10:
เอฟเฟกต์ IE9:
ใช้ซอร์สโค้ด:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "txt/html; charset = utf-8"/> <title> javascript IE6 คือ IE6 โดยการตัดสินว่า useragent ไม่จำเป็นต้องถูกต้องถ้า (document.all) document.write ('<!-[ถ้า lte ie 6]> <script type = "text/javascript"> window.ie6 = true <// script> <! [endif]->'); // var ie6 =/msie 6/i.test (navigator.useragent); // ไม่แนะนำบางระบบ 'ie6 useragent จะเป็น IE7 หรือการเปลี่ยนแปลงฟังก์ชั่น IE8 (picid, fileid) {var pic = document.getElementById (picid); var file = document.getElementById (fileId); if (window.filereader) {// Chrome, Firefox7+, Opera, IE10, IE9, IE9 ยังสามารถใช้ตัวกรองเพื่อใช้งาน reader = new filereader (); Ofreader.readasDataUrl (file.files [0]); Ofreader.onload = ฟังก์ชั่น (OfRevent) {pic.src = OfRevent.target.result;}; } อื่นถ้า (document.all) {// ie8- file.select (); var reallocalpath = document.selection.createrange (). ข้อความ // รับพา ธ ไฟล์ท้องถิ่นจริงภายใต้ IE ถ้า (window.ie6) pic.src = reallocalpath; // ie6 เบราว์เซอร์ตั้งค่า SRC ของ IMG ไปยังเส้นทางท้องถิ่นเพื่อแสดงภาพอื่นโดยตรง {// IE6 เวอร์ชันของ IE ที่ตั้งค่า SRC ของ IMG โดยตรงไม่สามารถแสดงภาพท้องถิ่นได้เนื่องจากปัญหาด้านความปลอดภัย แต่สามารถนำไปใช้ผ่านตัวกรองได้ เบราว์เซอร์ IE10 ไม่รองรับตัวกรองและจำเป็นต้องใช้ filereader เพื่อใช้งาน ดังนั้นโปรดระวังที่จะตัดสินว่า filereader first pic.style.filter = "progid: dximagetransform.microsoft.alphaimageLoader (sizingMethod = 'image', src =/" " + reallocalpath +"/")"; pic.src = 'data: image/gif; base64, r0lgodlhaqabaiaaap ////aaach5baeaaaaaaaaaaaaaaaaaaaaaaicraeaow =='; {// firefox6- ถ้า (file.files.item (0)) {url = file.files.item (0) .getAsDataUrl (); pic.src = url; }}} </script> </head> <body> <form name = "form1" enctype = "multipart/form-data"> <table> <tr> <td> sketch 1: </td> <td> <อินพุต type = "file" file1 "id =" file1 " </td> <td> <img src = "images/px.gif" id = "pic1"> </td> </tr> <tr> <td> Sketch 2: </td> <td> <อินพุต type = "file" file2 "id =" file2 "onchange =" </td> <td> <img src = "images/px.gif" id = "pic2"> </td> </tr> </table> </form> </body> </html>