บทความนี้จะสาธิตวิธีการอัปโหลดรูปภาพโดยใช้ JavaScript และ HTML
วิธีอัปโหลดรูปภาพอย่างง่ายโดยใช้ JavaScript/HTML
หากต้องการอัปโหลดรูปภาพอย่างง่ายโดยใช้ JavaScript ก่อนอื่น เราจะเพิ่มแท็กรูปภาพในหน้า HTML จากนั้นใช้รหัส JavaScript เพื่อโหลดและเลือกรูปภาพลงในหน้าเว็บ
สำหรับการใช้งานจริง ให้ลองใช้คำแนะนำที่ระบุไว้
ตัวอย่าง
ก่อนอื่น ทำตามคำแนะนำที่ให้ไว้:
- ใส่ “ <อินพุต> ” และระบุประเภทของอินพุตเป็น “ ไฟล์ '.
- ประเภท 'ไฟล์' นี้กำหนดฟิลด์ในการเลือกไฟล์และ ' เรียกดู ” ปุ่มสำหรับอัพโหลดไฟล์
- “
” แท็กแทรกตัวแบ่งบรรทัด - จากนั้นใส่เครื่องหมาย “
” แท็ก HTML และเพิ่ม “ รหัส แอตทริบิวต์ ” เพื่อระบุรหัสเฉพาะด้วยชื่อเฉพาะ
- “ src ” แอตทริบิวต์ที่ใช้เพื่อเพิ่ม URL ของไฟล์มีเดีย:
< br >
< img รหัส = 'อิมเมจของฉัน' src = '#' >
สังเกตได้ว่ามีการสร้างตัวเลือกไฟล์แล้ว และจะสามารถแสดงชื่อภาพได้หลังจากยอมรับอินพุตแล้วเท่านั้น:
ตอนนี้ภายใน ' <สคริปต์> ” แท็ก ใช้รหัสต่อไปนี้:
< สคริปต์ >
หน้าต่าง. addEventListener ( 'โหลด' , การทำงาน ( ) {
เอกสาร. ตัวเลือกแบบสอบถาม ( 'อินพุต[ประเภท='ไฟล์']' ) . addEventListener ( 'เปลี่ยน' , การทำงาน ( ) {
ถ้า ( นี้ . ไฟล์ && นี้ . ไฟล์ [ 0 ] ) {
วาริม = เอกสาร. getElementById ( 'img_content' ) ;
img กำลังโหลด = ( ) => {
URL . เพิกถอน ObjectURL ( img src ) ;
}
img src = URL . createObjectURL ( นี้ . ไฟล์ [ 0 ] ) ;
}
} ) ;
} ) ;
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- “ addEventListener() วิธีการ JavaScript อนุญาตให้แทรกหรือแนบตัวจัดการเหตุการณ์ที่กำหนดไว้กับองค์ประกอบ
- “ ตัวเลือกแบบสอบถาม () ” เป็นวิธีการที่ใช้ในการส่งคืนรายการแรกในเอกสารเฉพาะที่เชื่อมโยงกับตัวเลือกเฉพาะ
- “ getElementById() ” วิธีการใช้สำหรับรับองค์ประกอบโดยใช้รหัสที่กำหนด เพื่อจุดประสงค์นั้น ค่าของ the จะถูกส่งผ่านเป็นพารามิเตอร์
- “ เพิกถอน ObjectURL() ” เผยแพร่ URL วัตถุที่มีอยู่ซึ่งสร้างโดยใช้ URL ในการทำเช่นนั้น URL ของรูปภาพจะถูกส่งผ่านเป็นพารามิเตอร์ของวิธีนี้
- “ createObjectURL() ” เป็นวิธีคงที่ของ JavaScript ที่ทำให้สตริงเฉพาะมี URL ที่แสดงถึงวัตถุที่ส่งผ่านในพารามิเตอร์
เอาต์พุต
สังเกตได้ว่าเราอัปโหลดภาพธรรมดาสำเร็จแล้ว
บทสรุป
หากต้องการอัปโหลดภาพอย่างง่ายโดยใช้ JavaScript ให้ใช้ปุ่ม “ addEventListener() ” วิธีการที่อนุญาตให้แทรกหรือแนบตัวจัดการเหตุการณ์ที่กำหนดไว้กับองค์ประกอบ จากนั้น เข้าถึงองค์ประกอบที่กำหนดโดย id และใช้ ' เพิกถอน ObjectURL() ' และ ' createObjectURL() ” วิธีการ โพสต์นี้ระบุวิธีการอัปโหลดรูปภาพอย่างง่ายโดยใช้ JavaScript/HTML