การอัปโหลดรูปภาพเป็นฟังก์ชั่นธรรมดาและภาพตัวอย่างภาพเป็นฟังก์ชันย่อยที่ขาดไม่ได้ในฟังก์ชั่นการอัปโหลด ก่อนหน้านี้ฉันเคยสมัครสมาชิกกับเหตุการณ์ onchange ขององค์ประกอบอินพุต [type = file] เมื่อพา ธ เปลี่ยนภาพจะถูกอัปโหลดไปยังเซิร์ฟเวอร์จากนั้นได้รับพา ธ ภาพและค่าถูกกำหนดให้กับองค์ประกอบ IMG โดยไม่คำนึงถึงวิธีการแก้ปัญหาการส่งไฟล์แบบอะซิงโครนัสมันคือการทำความสะอาดภาพตัวอย่างชั่วคราวทางฝั่งเซิร์ฟเวอร์ซึ่งเพิ่มปริมาณงาน
ฉันบังเอิญพบข้อมูลที่เกี่ยวข้องเกี่ยวกับภาพตัวอย่างภาพส่วนหน้าบริสุทธิ์จาก MDN จากนั้นจัดเรียงออกและบันทึกไว้สำหรับการอ้างอิงในอนาคต
1. การเตรียม1──Filereader
Filereader เป็นคุณสมบัติใหม่ของ HTML5 สำหรับการอ่านข้อมูลของประเภท BLOB และประเภทไฟล์ การใช้งานเฉพาะมีดังนี้:
(1). วิธีการก่อสร้าง
var fr = new filereader ();
(2). คุณลักษณะ
ReadyState: Type ไม่ได้ลงนามสั้นสถานะปัจจุบันของอินสแตนซ์ filereader (ว่างเปล่า-0, ยังไม่มีการโหลดข้อมูล; การโหลด-1, ข้อมูลกำลังโหลดแล้วเสร็จแล้ว-2 คำขออ่านทั้งหมดเสร็จสมบูรณ์) อ่านอย่างเดียว
ผลลัพธ์: เนื้อหาไฟล์อ่านอ่านอย่างเดียว
ข้อผิดพลาด: ประเภทคือ domerror ระบุข้อผิดพลาดที่เกิดขึ้นเมื่ออ่านไฟล์อ่านอย่างเดียว
(3). วิธี
ยกเลิก (): ยกเลิกการดำเนินการอ่านและตั้งค่า readingstate ให้ทำ เมื่อไม่มีการดำเนินการอ่านการเรียกใช้วิธีนี้จะส่งข้อยกเว้น DOM_FILE_ABORT_ERR
ReadasarrayBuffer (Blob Blob): อ่านข้อมูลแอตทริบิวต์ผลลัพธ์ถูกตั้งค่าเป็นประเภท ArrayBuffer
readastext (blob blob [, encoding = 'utf-8']): อ่านข้อมูลแอตทริบิวต์ผลลัพธ์ถูกตั้งค่าเป็นประเภทสตริง
ReadAsBinaryString (Blob Blob): อ่านข้อมูลแอตทริบิวต์ผลลัพธ์ถูกตั้งค่าเป็นข้อมูลไบนารีดั้งเดิม
ReadasDataUrl (Blob Blob): อ่านข้อมูลแอตทริบิวต์ผลลัพธ์ถูกตั้งค่าเป็นแบบฟอร์มข้อมูล URI ข้อมูล (สำหรับรายละเอียดกรุณาเยี่ยมชม "JS Magic Hall: บทนำสู่ Data URI Scheme")
(4). เหตุการณ์
OnLoad: ทริกเกอร์หลังจากอ่านข้อมูลสำเร็จ
OneERROR: ทริกเกอร์เมื่อมีข้อยกเว้นถูกโยนเมื่ออ่านข้อมูล
OnloadStart: ทริกเกอร์ก่อนอ่านข้อมูล
OnLoadend: ทริกเกอร์หลังจากอ่านข้อมูลทริกเกอร์หลังจาก OnLoad หรือ OnERROR
onabort: กระตุ้นหลังจากยกเลิกการอ่าน
OnProgress: ทริกเกอร์เป็นระยะในระหว่างการอ่าน
(5). การสนับสนุนเบราว์เซอร์
FF3.6+, Chrome7+, IE10+
2. การเตรียมการ2─Fximagetransform.microsoft.alphaimageloaderตัวกรอง
(1). ฟังก์ชั่น: ฟังก์ชั่นหลักคือการประมวลผลรูปภาพอย่างโปร่งใส (IE5.5 ~ 6 ไม่รองรับ PNG โปร่งใส)
(2). วิธีใช้ในสไตล์
#Preview {ตัวกรอง: progid: dximagetransform.microsoft.alphaimageloader (sizingMethod = Scale, src = "dummy.png");}(3). วิธีใช้ใน JS
var preview = document.getElementById ('preview'); preview.style.filter = preview.currentstyle.filter + "; progid: dximagetransform.microsoft.alphaimageloader (sizingmethod = สเกล, src = 'dummy.png')"; preview.filters.item ("dximagetransform.microsoft.alphaimageLoader")(4). คุณลักษณะ
เปิดใช้งาน: ไม่บังคับการตั้งค่าว่าตัวกรองถูกเปิดใช้งานหรือไม่ ช่วงค่าช่วงจริง (ค่าเริ่มต้น), เท็จ
SizingMethod: ตัวเลือกตั้งค่าวิธีการแสดงภาพตัวกรองที่แสดงภายในขอบเขตคอนเทนเนอร์ช่วงการครอบตัดช่วงค่า (ตัดภาพให้พอดีกับขนาดของคอนเทนเนอร์) ภาพ (ค่าเริ่มต้นเพิ่มหรือลดขนาดคอนเทนเนอร์ให้พอดีกับขนาดของภาพ) สเกล
SRC: จำเป็นต้องใช้ URL สัมบูรณ์หรือสัมพัทธ์เพื่อชี้ไปที่ภาพพื้นหลัง เมื่อ URL เป็นที่อยู่ท้องถิ่นของคอมพิวเตอร์ผู้ใช้ข้อยกเว้นที่ไม่อนุญาตให้เข้าถึงระบบไฟล์ในท้องถิ่นจะถูกโยนลงเมื่อ SRC ขององค์ประกอบ IMG เป็นที่อยู่ท้องถิ่นของคอมพิวเตอร์ผู้ใช้
การดำเนินการ
ต่อไปเราจะใช้ readasdataurl ของ filereader เพื่อรับรูปแบบข้อมูล URI เพื่อใช้ฟังก์ชั่นตัวอย่างภาพและเราใช้ตัวกรอง dximagetransform.microsoft.alphaimageLoader เพื่อลดระดับ
ชิ้นส่วน HTML:
<style type = "text/css">#ดูตัวอย่าง {width: 100px; ความสูง: 100px;} </style> <!-[ถ้า lte ie 9]> <style type = "text/css"> #preview {ตัวกรอง: progid: dximagetransform.microsoft.alphaimageloader (sizingMethod = scale); } </style> <! [endif]-> <อินพุต type = "ไฟล์" onchange = "showpreview (นี่);"/> <div id = "preview"> </div>JS Fragment:
var preview = function (el) {var pv = document.getElementById ("ดูตัวอย่าง"); // ie5.5 ~ 9 ใช้ตัวกรองถ้า (pv.filters && typeof (pv.filters.item) === 'function') {pv.filters.item ("dximagetransform.microsoft.alphaimageloader"). src = el.value; } else {// เบราว์เซอร์อื่น ๆ และ IE10+ (ตัวกรองไม่รองรับ) ใช้ filereader var fr = filereader ใหม่ (); fr.onload = function (evt) {var pvimg = image ใหม่ (); pvimg.style.width = pv.offsetWidth + 'px'; pvimg.style.height = pv.offsetheight + 'px'; pvimg.src = evt.target.result; PV.RemoveChild (0); PV.AppendChild (PVIMG); - fr.readasdataurl (el.files [0]); -4. หลุม
เนื่องจาก IE11 ได้พิจารณาความปลอดภัยจึงเป็นไปไม่ได้ที่จะได้รับที่อยู่จริงของไฟล์ที่เลือกของผู้ใช้ผ่านค่า OUTERHTML และ GetAttribute บนองค์ประกอบอินพุต [type = file] และสามารถรับชื่อ C:/ fakepath/ ไฟล์เท่านั้น ดังนั้นหากใช้ IE11 แต่โหมดข้อความถูกตั้งค่าไว้ที่ต่ำกว่า 10 ไม่มีวิธีที่จะแสดงตัวอย่างภาพ
การแก้ปัญหา 1 ──เพิ่มประโยคนี้ภายใต้แท็กหัว: <meta http-equiv = "X-UA ที่เข้ากันได้" เนื้อหา = "ie = edge"> สิ่งนี้จะบอก IE ว่ารุ่นสูงสุดของ IE ปัจจุบันสามารถใช้ในการแยกวิเคราะห์และแสดงผลหน้าเว็บตามค่าเริ่มต้น
โซลูชัน 2 ──use Document.selection.createrangeColleciton () เพื่อรับที่อยู่จริง การดำเนินการเฉพาะมีดังนี้:
// สมมติว่า fileel เป็น [type = file] element fileel.select (); var filepath = document.select.createrangecollection () [0] .htmltext;
5. อาหารเสริม: ใช้ window.url.createObjecturl แทน filereader
รูปแบบข้อมูล URI ที่ได้รับผ่านวิธีการอ่านของ Filereader จะสร้างสตริง Base64 ที่ยาวมาก หากภาพมีขนาดใหญ่กว่าสตริงจะยาวขึ้น หากการรีดกลับของหน้าเกิดขึ้นมันจะทำให้ประสิทธิภาพลดลง การแก้ปัญหามีดังนี้:
1. แท็ก IMG ที่แสดงตัวอย่างใช้การวางตำแหน่งสัมบูรณ์เพื่อออกจากการไหลของเอกสารปกติซึ่งไม่มีส่วนเกี่ยวข้องกับองค์ประกอบอื่น ๆ ของเอกสารและจะไม่ส่งผลกระทบต่อประสิทธิภาพ
2. ใช้ window.url.createObjecturl (blob blob) เพื่อสร้างลิงก์ข้อมูล
var createObjecturl = function (blob) {return window [window.webkiturl? 'webkiturl': 'url'] ['createobjecturl'] (blob);};หมายเหตุ: ลิงก์ข้อมูลที่สร้างขึ้นโดย window.url.createObjecturl เป็นหน่วยความจำพิเศษดังนั้นหากคุณใช้เป็นครั้งคราวคุณต้องโทรหา window.url.revokeobjecturl (Domstring objurl) เพื่อเพิ่มหน่วยความจำ เนื้อหาจะถูกปล่อยออกมาโดยอัตโนมัติเมื่อมีการรีเฟรชหน้า
var resolveObjecturl = function (blob) {window [window.webkkiturl? 'webkiturl': 'url'] ['RevokeObjecturl'] (blob);};ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน