บทความนี้แบ่งปันตัวอย่างของ JS HTML5 Multi-Picture Upload และตัวอย่างตัวอย่างสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
แอปพลิเคชันหลัก
1. ไฟล์ HTML5 สามารถเลือกหลายไฟล์และรับข้อมูลหลายไฟล์
2. วัตถุ XMLHTTPREQUEST, ส่งคำขอส่ง HTTP
3. วางแต่ละไฟล์ใน formData สำหรับการส่ง
4. ใช้ readasdataurl เพื่อเปลี่ยนเนื้อหาภาพให้เป็น URL โดยตรงวางไว้ใน SRC ของแท็ก IMG และสร้างรูปภาพที่สามารถดูตัวอย่างได้
รหัส HTML+CSS+JS
<! doctype html> <head> <meta http-equiv = "content-type" content = "text/html" charset = "utf-8"/> <title> ทดสอบ html filereader </title> <สไตล์ type = "text/css"> html, body, header, footer, div, ul, li, h1, h2, h3, h4, h5, h6, ฉลาก, อินพุต, textarea, p, span, a {padding: 0; ระยะขอบ: 0;} img {border: 0;} em, strong {font-weight: ปกติ; รูปแบบ FONT: ปกติ;} ul {list-style: none;} h1, h2, h3, h4, h5, h6 {font-weight: ปกติ; FONT-SIZE: 100%;} A, A: หลังจาก {การกำหนดข้อความ: ไม่มี;}. photo_wrap {clear: ทั้งสอง;}. photo_wrap li {margin: 10px; ความกว้าง: 150px; ลอย: ซ้าย;}. photo_box {ความสูง: 150px; ความกว้าง: 150px; ล้น: ซ่อน; ตำแหน่ง: สัมพัทธ์;}. photo_box .img1 {ความสูง: 150px;}. photo_box .img2 {width: 150px;}. upload_result {ความสูง: 50px;}. btn {ตำแหน่ง: ญาติ; ความสูง: 40px; ความกว้าง: 100px; ลอย: ซ้าย;}. btn {ความสูง: 40px; สายไฟ: 40px; สี: #FFF; แสดง: บล็อก; แนวชายแดน: 3px; TEXT-ALIGN: CENTER; พื้นหลังสี: #FF5581; / * เบราว์เซอร์เก่า */ พื้นหลัง-ภาพ: -moz-Linear-Gradient (บนสุด, #FA7B9C 0%, #FF5581 100%); / * ff3.6+ */ พื้นหลัง-ภาพ: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, การหยุดสี (0%,#fa7b9c), สี-หยุด (100%,#ff5581)); / * Chrome, Safari4+ */ background-image: -webkit-linear-gradient (บนสุด, #FA7B9C 0%, #FF5581 100%); / * Chrome10+, safari5.1+ */ background-image: -o-linear-gradient (บนสุด, #FA7B9C 0%, #FF5581 100%); / * Opera 11.10+ */ background-image: -ms-linear-gradient (บนสุด, #FA7B9C 0%, #FF5581 100%); / * IE10+ */ Image-Image: linear-gradient (ถึงล่าง, #FA7B9C 0%, #FF5581 100%); / * w3c */ ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr = '#fa7b9c', endcolorstr = '#ff5581', gradientType = 0); / * IE6-8 */ Box-Shadow: 0 1px 0 RGBA (255, 255, 255, 0.3) inset, 0 1px 2px RGBA (0, 0, 0, 0.3);}. BTN_ADD_PIC {ความกว้าง: 100px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0;}. btn_upload {width: 100px; มาร์จิ้น: 0 10px 10px; ลอย: ซ้าย;}. btn: โฮเวอร์, .btn_cur {พื้นหลังสี: #fb99b1; / * เบราว์เซอร์เก่า */ พื้นหลัง-ภาพ: -moz-Linear-Gradient (บนสุด, #FB99B1 0%, #FF5581 100%); / * ff3.6+ */ พื้นหลัง-ภาพ: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, การหยุดสี (0%,#fb99b1), สี-หยุด (100%, ## ff5581)); / * Chrome, Safari4+ */ background-image: -webkit-linear-gradient (บนสุด, #fb99b1 0%, #FF5581 100%); / * Chrome10+, Safari5.1+ */ background-image: -o-linear-gradient (บนสุด, #fb99b1 0%, #FF5581 100%); / * Opera 11.10+ */ background-image: -ms-linear-gradient (บนสุด, #fb99b1 0%, #FF5581 100%); / * IE10+ */ Image-Image: linear-gradient (ถึงล่าง, #FB99B1 0%, #FF5581 100%); / * w3c */ ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr = '#fb99b1', endcolorstr = '#ff5581', gradientType = 0); / * IE6-8 */}. file_input_wrap {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 100px; ความสูง: 40px;}. file_input_wrap label {width: 100%; ความสูง: 100%; แสดง: บล็อก; ความทึบ: 0; เคอร์เซอร์: ตัวชี้;}. file_input_wrap อินพุต {ความทึบ: 0; ตัวกรอง: alpha (opacity = 0);/*ie8 และต่ำกว่า*/ ตำแหน่ง: สัมบูรณ์; ด้านบน: 7px; ขวา: 173px; เคอร์เซอร์: ตัวชี้; ความกว้าง: 95px;}. photo_box .icon_pos {ความสูง: 20px; ความกว้าง: 20px; แสดง: บล็อก; ตำแหน่ง: สัมบูรณ์; ขวา: 0; ด้านล่าง: 0;}. photo_box .loading {ความสูง: 10px; แสดง: บล็อก; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านล่าง: 0; พื้นหลัง-ภาพ: url (loading.gif);}. sucess_icon {background-image: url (icons_01.png); ตำแหน่งพื้นหลัง: 0 0;}. error_icon {background-image: url (icons_01.png); ตำแหน่งพื้นหลัง: -20px 0;} </style> </head> <body> <div> <a id = "j_add_pic" href = "javaScript:;"> เพิ่มรูปภาพ </a> <div> <อินพุตประเภท = "ไฟล์" id = "ไฟล์" ไฟล์ " </div> </div> <a id = "j_upload" href = "javascript:;"> เริ่มอัปโหลด </a> <div id = "j_photo_wrap" ><ul></ul> </div> </body> type = "text/javascript"> var img_index = array ใหม่ (); ฟังก์ชั่น upload_img () {var j = 0; img (); ฟังก์ชั่น img () {// 1 สร้างวัตถุ XMLHTTPREQUEST IF (IMG_INDEX.Length> 0) {var singleimg = img_index [j]; var xmlhttp; if (window.xmlhttprequest) {// ie7+, firefox, chrome, opera, safari xmlhttp = ใหม่ xmlhttprequest; // แก้ไขหากสำหรับข้อบกพร่องของเบราว์เซอร์ Mozillar บางรุ่น (XMLHTTP.OverridEmimeType) {XMLHTTP.OVERRIDEMIMETYPE ('ข้อความ/XML'); - } else if (window.activexobject) {// ie6, ie5 xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); - if (xmlhttp.upload) {// progress bar xmlhttp.upload.addeventListener ("ความคืบหน้า" ฟังก์ชั่น (e) {ถ้า (e.lengthcomputable) {var load_percent = (e.loaded /e.total) * 100; $ ('#j_photo_wrap li '). eq (j) .find ('. การโหลด '). css (' ความกว้าง ', load_percent+'%');}}, false); // 2. ฟังก์ชั่นการโทรกลับ // onreadyStateChange เป็นฟังก์ชั่นการจัดการเหตุการณ์ที่เรียกว่าทุกครั้งที่คุณสมบัติ ReadyState เปลี่ยน XMLHTTP.OnReadyStateChange = ฟังก์ชั่น (e) {ถ้า (xmlhttp.readyState == 4) {ถ้า (xmlhttp.status == 200) if (json.status == 1) {$ ('#j_photo_wrap ul li li'). eq (j) .find ('. upload_result') ข้อความ (singleimg.name+'อัปโหลดเสร็จสิ้น'); $ ('#j_photo_wrap ul li'). eq (j) .find ('. การโหลด'). ซ่อน (); $ ('#j_photo_wrap ul li'). eq (j) .find ('. icon_pos'). addclass ('sucess_icon'); } else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. upload_result') ข้อความ (singleimg.name+'อัปโหลดล้มเหลว'); $ ('#j_photo_wrap ul li'). eq (j) .find ('. การโหลด'). ซ่อน (); $ ('#j_photo_wrap ul li'). eq (j) .find ('. icon_pos'). addclass ('error_icon'); }} else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. upload_result') ข้อความ (singleimg.name+'อัปโหลดล้มเหลว'); $ ('#j_photo_wrap ul li'). eq (j) .find ('. การโหลด'). ซ่อน (); $ ('#j_photo_wrap ul li'). eq (j) .find ('. การโหลด'). ซ่อน (); $ ('#j_photo_wrap ul li'). eq (j) .find ('. icon_pos'). addclass ('error_icon'); } if (j <img_index.length - 1) {j ++; img (); - // 3. ตั้งค่าข้อมูลการเชื่อมต่อ // เริ่มต้นพารามิเตอร์การร้องขอ HTTP แต่อย่าส่งคำขอ // วิธีการเชื่อมต่อพารามิเตอร์แรกคือที่สองคือที่อยู่ URL และจริงที่สามคือการเชื่อมต่อแบบอะซิงโครนัสซึ่งเป็นแบบอะซิงโครนัสโดยค่าเริ่มต้น // ส่งข้อมูลโดยใช้วิธีการโพสต์ xmlhttp.open ("โพสต์", "upload.php", จริง); // 4. ส่งข้อมูลเริ่มโต้ตอบกับเซิร์ฟเวอร์ // ส่งคำขอ HTTP ใช้พารามิเตอร์ที่ส่งผ่านไปยังวิธี Open () และคำขอเสริมที่ส่งผ่านไปยังวิธีการ หากเป็นจริงการส่งประโยคจะถูกดำเนินการทันที // หากเป็นเท็จ (ซิงโครนัส) การส่งจะถูกดำเนินการหลังจากข้อมูลเซิร์ฟเวอร์กลับมา // รับเมธอดไม่จำเป็นต้องมีเนื้อหาในการส่ง var formData = new FormData (); formdata.append ("filedata", singleimg); xmlhttp.send (formdata); - $ ('#j_upload') คลิก (ฟังก์ชัน () {upload_img ();}); $ ('#j_add_area'). hover (function () {$ ('#j_add_pic'). addclass ('btn_cur');}, function () {$ ('#j_add_pic') $ ('#j_add_area') คลิก (ฟังก์ชัน () {$ ('#ไฟล์') คลิก ();}); ฟังก์ชั่น resize (img) {ถ้า (img.offsetheight> img.offsetWidth) {$ (img) .removeClass ('img1'). addClass ('IMG2'); } else {$ (img) .removeClass ('IMG2'). addClass ('IMG1'); }} function fileinfo (แหล่งที่มา) {var ireg =/image//.*/i; var files = source.files; ชื่อ var, ขนาด, ประเภท; สำหรับ (var i = 0, f; f = ไฟล์ [i]; i ++) {name = f.name; ขนาด = F.Size; type = f.type; if (! type.match (iReg)) {$ ('#j_photo_wrap ul'). ผนวก ('<li> <li> <div>'+ชื่อ+'ไม่ใช่ภาพ <span> </span> <span> </pan> </div> <div> </div> </li>') } else {img_index.push (f); if (ขนาด> 1048576) {$ ('#j_photo_wrap ul'). ผนวก ('<li> <div>'+ชื่อ+'ใหญ่เกินไปที่จะสร้างตัวอย่าง <span> </span> <span> </span> </div> } else {if (window.filereader) {var fr = new filereader (); fr.onload = (ฟังก์ชั่น (f) {ฟังก์ชั่น return (e) {$ ('#j_photo_wrap ul'). ผนวก ('<li> <div> <img onload = "resize (this);" src = "' this.result+'"/> fr.readasdataurl (f); }}}}}}}; </script> </html>PHP ได้รับรหัสไฟล์ (ที่นี่จะได้รับชื่อไฟล์ประเภทและขนาดเท่านั้นและไม่มีการดำเนินการอื่น ๆ )
<? php $ name = $ _files ['filedata'] ['name']; $ type = $ _files ['filedata'] ['type']; $ size = $ _files ['filedata'] ['size']; $ return = array ("name" => $ name, "type" => $ type, "size" => $ size, "สถานะ" => 1); $ return = json_encode ($ return); echo $ return;?>ปัญหาที่มีอยู่
1. เพื่อสร้างภาพขนาดย่อ ReadAsDataUrl จะใช้หน่วยความจำเมื่ออ่านเนื้อหาไฟล์ดังนั้นภาพขนาดใหญ่จะทำให้เบราว์เซอร์ติดอยู่หรือขัดข้อง
2. การอัปโหลดไม่ได้ดำเนินการในการแบ่งส่วน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น