Saat bekerja di Shenzhen, Anda memerlukan pengguna untuk mengunggah fungsi pratinjau avatar! Saya mencari banyak dari mereka secara online, tetapi saya tidak terlalu puas. Entah itu flash, atau mengembalikan jalur gambar setelah unggah Ajax, atau tidak dapat digunakan sama sekali. Untungnya, seseorang menulis fungsi pratinjau gambar dalam proyek ini sebelumnya, dan saya mengambilnya untuk membuat catatan di sini untuk memudahkan saya menggunakannya di masa depan dan untuk teman -teman lain yang membutuhkan!
Kode sederhana, sebagai berikut:
<! 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"> <adept> <meta http-equiv = "content-type" content = "text/html; fungsi uTF-8"/> <title> oleh: dragondean </title> <script type = "text/Javas/JAVAS/JAVE/JAVE/JAVE/JAVEK/PERUSAHAN BE dengan dragondean </title <script =" TEXT/JAVAS/JAVAS/TEKST/JAVEC/TEKST/TEXTAS. setImagePreview(avalue) {var docObj=document.getElementById("doc");var imgObjPreview=document.getElementById("preview");if(docObj.files &&docObj.files[0]){//Under Firefox, directly set the img attribute imgObjPreview.style.display = 'blok'; imgobjpreview.style.width = '150px'; imgobjpreview.style.height = '180px'; //imgobjpreview.src = docobj.files [0] .getAsdataurl (); // Versi Firefox 7 atau di atas tidak dapat diperoleh dengan menggunakan metode getasdataurl () di atas. Anda memerlukan metode berikut IMGOBJPreview.src = window.url.createObtureRl (docobj.files [0]);} else {// di bawah IE, gunakan filter docobj.select (); var imgsrc = document.selection.createrange (). Teks; var localimagid = document.getelement = document.selection.createrange (). Teks; var localimagid = document.getelement = document.selection.createrang localimagid.style.width = "150px"; localimagid.style.height = "180px"; // Penangkapan pengecualian gambar akan mencegah pengguna memodifikasi akhiran untuk menempa gambar Coba {localimagid.style.filter = "progid: dximagetransform.microsoft.alphaimageloader (sizingMethod = skala)"; localimagid.filters.item ("dximagetransform.microsoft.alphaimeloader"). incorrect, please select again!");return false;}imgObjPreview.style.display = 'none';document.selection.empty();}return true;}</script></head><body><table cellpacing="0" cellpadding="0"><tbody><tr><td align="center"><div id="localImag"><img id = "pratinjau" src = "http://blog.chuangling.net/public/images/top.jpg" style = "display: block; Lebar: 150px; height: 180px;"></div></td></tr><tr><td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" onchange="javascript:setImagePreview();"></td></tr></tbody></table></body></html>Tes dapat digunakan di IE8, FF12.0 dan Google Chrome 28.0.1500.72!