เมื่อทำงานในเซินเจิ้นคุณต้องมีผู้ใช้ในการอัปโหลดฟังก์ชั่นตัวอย่าง Avatar! ฉันมองหาพวกเขาออนไลน์มากมาย แต่ฉันก็ไม่พอใจมาก ไม่ว่าจะเป็นแฟลชหรือส่งคืนเส้นทางรูปภาพหลังจากอัพโหลด AJAX หรือไม่สามารถใช้งานได้เลย โชคดีที่มีคนเขียนฟังก์ชั่นตัวอย่างภาพในโครงการนี้มาก่อนและฉันก็นำมันออกมาเพื่อทำบันทึกที่นี่เพื่อให้ฉันใช้งานได้ง่ายขึ้นในอนาคตและสำหรับเพื่อนคนอื่น ๆ ที่ต้องการ!
รหัสนั้นง่ายดังนี้:
<! 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 = "text/html; charset = utf-8"/> <title> SetImagePreview (Avalue) {var docobj = document.getElementById ("doc"); var imgobjpreview = document.getElementById ("ดูตัวอย่าง"); ถ้า (docobj.files && docobj.files [0]) {// ภายใต้ Firefox 'block'; imgoBjpreview.style.width = '150px'; imgoBjpreview.style.height = '180px'; //imgobjpreview.src = docobj.files [0] .getasdataurl (); // รุ่นของ Firefox 7 หรือสูงกว่าไม่สามารถรับได้โดยใช้วิธี getasdataurl () ด้านบน คุณต้องใช้วิธีการต่อไปนี้ imgoBjpreview.src = window.url.createObjecturl (docobj.files [0]);} else {// ภายใต้ IE, ใช้ตัวกรอง docobj.select (); var imgsrc = document.selection.createrange () localimagid.style.width = "150px"; localimagid.style.height = "180px" ลอง {localimagid.style.filter = "progid: dximagetransform.microsoft.alphaimageLoader (sizingMethod = scale)"; localimagid.filters.item ("dximagetransform.microsoft.alphaimageLoader" ไม่ถูกต้องโปรดเลือกอีกครั้ง! "); return false;} imgoBjpreview.style.display = 'none'; document.selection.empty ();} return true;} </script> </head> <body> <table cellpacing =" 0 "cellpadding =" 0 "> <tbody> src = "http://blog.chuangling.net/public/images/top.jpg" style = "จอแสดงผล: บล็อก; ความกว้าง: 150px; ความสูง: 180px; "> </div> </td> </tr> <tr> <td align =" center "style =" padding-top: 10px; "> <อินพุต type =" file "name =" file "id =" doc "onchange =" javaScript: setImagePreview ();การทดสอบสามารถใช้ใน IE8, FF12.0 และ Google Chrome 28.0.1500.72!