1. บางวิธีในการรับรู้ตัวอย่างภาพ
หลังจากทำความเข้าใจแล้ววิธีการนั้นคล้ายกันจริง ๆ อาจมีวิธีต่อไปนี้:
①สมัครสมาชิกเหตุการณ์ onchange ขององค์ประกอบอินพุต [type = file]
เมื่อเปลี่ยนเส้นทางที่เลือกรูปภาพจะถูกอัปโหลดไปยังเซิร์ฟเวอร์และที่อยู่ของภาพจะถูกส่งกลับไปยังฝั่งเซิร์ฟเวอร์และกำหนดให้กับองค์ประกอบ IMG
ข้อเสีย: ภาระงานมีขนาดใหญ่ การอัปโหลดบางอย่างไม่ใช่รูปภาพที่ผู้ใช้จำเป็นต้องอัปโหลดในที่สุด อย่างไรก็ตามวิธีนี้จะบันทึกรูปภาพทั้งหมดที่เลือกระหว่างกระบวนการอัปโหลดไปยังเซิร์ฟเวอร์ซึ่งจะทำให้เกิดทรัพยากรที่สูญเปล่า นอกจากนี้การทำความสะอาดภาพตัวอย่างชั่วคราวทางฝั่งเซิร์ฟเวอร์ยังต้องใช้งานจำนวนหนึ่ง
②ใช้คุณสมบัติ HTML5 Filereader ใหม่
วัตถุนี้มีวิธีการที่เกี่ยวข้องมากมายวิธีที่สำคัญที่สุดคือ ReadasDataurl คลิกฉันเพื่อเรียนรู้เพิ่มเติม
ข้อเสีย: รูปแบบข้อมูล URI ที่ได้รับผ่านวิธีการ ReadasDataurl ของ Filereader จะสร้างสตริง Base64 ที่ยาวมาก หากภาพมีขนาดใหญ่กว่าสตริงจะยาวขึ้น หากการรีดกลับของหน้าเกิดขึ้นมันจะทำให้ประสิทธิภาพลดลง ยิ่งไปกว่านั้นการสนับสนุนเบราว์เซอร์นั้นไม่สอดคล้องกันและเบราว์เซอร์ที่รองรับคือ: FF3.6+, Chrome7+, IE10+
③ใช้ window.url.createObjecturl แทน filereader จากนั้นใช้ตัวกรอง dximagetransform.microsoft.alphaimageloader ให้เข้ากันได้กับ IE
ข้อเสีย: เนื่องจากข้อควรพิจารณาด้านความปลอดภัยใน IE11 ที่อยู่จริงของไฟล์ที่เลือกของผู้ใช้ไม่สามารถรับได้ผ่านค่า OUTERHTML และ GetAttribute บนองค์ประกอบอินพุต [ประเภท = ไฟล์] และสามารถรับได้เท่านั้น
D:/Frontend/ชื่อไฟล์ ดังนั้นคุณต้องใช้ document.selection.createrangecollection วิธีการรับที่อยู่จริง
2. การผลิตปลั๊กอินของฉัน
ฉันเลือกวิธีการที่อนุรักษ์นิยมมากขึ้นซึ่งเป็นวิธีที่สามในการใช้ window.url.createObjecturl แทน filereader จากนั้นใช้ตัวกรอง dximagetransform.microsoft.alphaimageloader ให้เข้ากันได้กับ IE
①ขั้นตอนแรกคือเค้าโครง HTML
<div id = "pic"> <img id = "preview" src = "../ imgs/default.jpeg"> </div> <อินพุต type = "ไฟล์" id = "updoadbtn" accept = "image/*" onChange = "setPreviewpic ()">>
คุณอยากจะพูดง่าย ๆ ไหม?
②ขั้นตอนที่สองปลั๊กอิน JS encapsulation
1. สร้างวัตถุ
ฉันใช้วิธีการสืบทอดแบบรวมกันเป็นหลักและห่อหุ้มสองวิธีคือการอัปโหลดรูปภาพเดี่ยวและอัพโหลดรูปภาพหลายภาพ เนื่องจากไม่ว่าจะเป็นการอัปโหลดภาพเดียวหรืออัปโหลดภาพเดียวคุณต้องส่งผ่านและอัปโหลดปุ่มอินพุตแท็ก IMG, div ที่ห่อด้วย IMG และค่าภาพเดียวสูงสุดใน KB ดังนั้นพารามิเตอร์ทั้งสี่นี้จะต้องส่งผ่านเมื่อสร้างวัตถุอัพโหลดอิมเมจ วิธีการสร้างวัตถุนี้มีดังนี้:
var setPreviewpic = function (fileObj, ตัวอย่าง, picWrap, maximgSize) {this.FileObj = fileObj; this.preview = Preview; this.picWrap = picWrap; this.maximgsize = maximgSize;}2. กำหนดรูปแบบการจับคู่
เนื่องจากเป็นการอัปโหลดรูปภาพนอกเหนือจากการเพิ่ม accept = "image/*" เพื่อป้อนข้อมูลและทำการ จำกัด เบื้องต้นจึงจำเป็นต้องมีความสม่ำเสมอของ JS เพื่อตรวจสอบว่าเป็นภาพผ่านการตรวจจับเส้นทางหรือไม่ ดังนั้นกำหนดรูปแบบนี้บนต้นแบบสำหรับใช้ในสองวิธี:
setPreviewpic.prototype.pattern = ใหม่ regexp ('/. (jpg | png | jpeg)+$', 'i');3. กำหนดวิธีการ
สิ่งสำคัญคือการพิจารณาว่าสภาพแวดล้อมต่ำกว่า IE11 และเขียนโซลูชันสองประเภทหรือไม่ อย่างแรกคือการดูตัวอย่างโดยตรงโดยการเปลี่ยน SRC ของ IMG และที่สองคือการบรรลุเอฟเฟกต์ตัวอย่างผ่านตัวกรองภายใต้ IE รุ่นล่าง
FF, Chrome, IE11 หรือสูงกว่า: (รหัสสำหรับการดูตัวอย่างหลายภาพถูกโพสต์ที่นี่)
<span> if (maxpics) {</span> <br> ถ้า (this.fileobj.files && this.fileobj.files [0]) {var imgs = this.picwrap.queryselectorall ('img'); // ค้นหาจำนวนรูปภาพที่มีอยู่แล้วใน dom var num = imgs.length; var html = this.picwrap.innerhtml; if (number (num) <number (maxpics)) {// ตัดสินว่าเกินขีด จำกัด การอัปโหลดสูงสุดหรือไม่ถ้า (num == 1 && (! imgs [0] .classlist.contains ('newload'))) {// ครอบคลุมภาพเริ่มต้นแรก html = '';} ถ้า (this.pattern.test (fileobj.files [0] .name)) {ถ้า (ตัดสิน (fileobj.files [0] .Size/1024, this.maximgsize) {// ตัดสินว่าขนาดของภาพเกินขีด จำกัด html = '<img style = "margin: 5px; ความกว้าง: '+width+' px; ความสูง: '+ความสูง+' px;" src = '+window.url.createObjecturl (this.fileobj.files [0])+' /> '+html; this.picwrap.innerhtml = html;} else {Alert ('รูปภาพที่คุณอัปโหลดนั้นใหญ่เกินไป!');}} else {Alert ('สิ่งที่คุณอัปโหลดดูเหมือนจะไม่เป็นภาพโปรดตรวจสอบ!');ภายใต้ IE11 ใช้ตัวกรองเพื่อให้ได้ผล:
var nums = this.picwrap.childnodes.length; // เนื่องจาก querySelectorall และวิธีอื่น ๆ ไม่ได้รับการสนับสนุนด้านล่าง IE6 เราสามารถตัดสินได้ว่า (nums <maxpics+2) ตามความยาวของเด็กถ้า (nums <maxpics+2) {// การเพิ่ม 2 if (document.selection) {var imgsrc = document.selection.createrange (). text; var image = new image (); image.src = imgsrc; filesize = image.filesize; ถ้า (ตัดสิน (image.filesize/1024, this.maximgsize)) {// ขนาดของ div ต้องตั้งค่าใน IE var ele = document.createElement ('div'); ele.style.width = width+'px'; ele.style.height = ความสูง+'px'; ele.style.filter = "progid: dximagetra nsform.microsoft.alphaimageLoader (SizingMethod = Scale, src = '"+imgsrc+"') "; ลอง {this.picwrap.appendchild (ele);} catch (e) {Alert (' ภาพที่คุณอัปโหลดไม่ถูกต้องโปรดเลือกอีกครั้ง! '); return false;} this.preview.style.display = 'none'; document.selection.empty ();} else {Alert ('ภาพที่คุณอัปโหลดมีขนาดใหญ่เกินไป!');}}ณ จุดนี้มันเสร็จแล้ว!
การใช้งาน:
<script type = "text/javascript" src = "../ js/singlepic.js"> </script> <script> var fileobj = document.getElementById ('uploadBtn'); var preview = document.getElementById ('preview'); var picWrap = document setPreviewpic (fileobj, ตัวอย่าง, picWrap, 100); // กำหนดวัตถุอัพโหลดอิมเมจอิมเมจพารามิเตอร์คือปุ่มอินพุตสำหรับการอัปโหลดภาพแพ็คเกจแท็ก IMG, DIV ที่ห่อหุ้มด้วย IMG // uploadpics (200,250,2); // uploadpics (200,250,2); // uploadpics (200,250,2); // uploadpics (200,250,2); // อัปโหลดหลายรูปภาพพารามิเตอร์คือความกว้างความสูงและจำนวนสูงสุดของการอัปโหลด} </script>ด้านบนเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับการผลิตปลั๊กอินตัวอย่างอัพโหลด JS (เข้ากันได้กับ IE6) ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับคุณทันเวลา!