บันทึกสั้น ๆ ของรหัสบางอย่างที่อัปโหลด H5 ในเช้านี้และยังคงมีข้อผิดพลาด
1. แสดง
เนื่องจากไฟล์อัปโหลดส่วนหน้าจะต้องส่งผ่านแบบฟอร์มและไม่สามารถใช้ AJAX ได้ ด้วยวิธีนี้มันไม่ดีที่จะใส่อินพุตด้วยไฟล์ประเภทบนหน้ามือถือ ดังที่แสดงในรูปด้านล่างมันน่าหงุดหงิดมากหรือไม่?
หลังจากค้นหาโซลูชันพีซีบางตัวจะแทนที่อินพุตนี้ด้วย Flash โดยใช้ไลบรารี JQuery Tool เช่น Uploadify แต่เบราว์เซอร์มือถือส่วนใหญ่ไม่รองรับแฟลช ดังนั้นวิธีสุดท้ายคือการใช้แบบฟอร์มเพียงแค่ตั้งค่าความโปร่งใสของแบบฟอร์มและอินพุตเป็น 0 เพื่อให้พวกเขาอยู่ใน DIV โดยมีเนื้อหาที่เตรียมไว้เพื่อแสดงและเนื้อหาที่แสดงสามารถทำได้ตามที่คุณต้องการ รหัสมีดังนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, user-scalable = no"> <title> มาร์จิ้น: 0 auto;} .upload {ตำแหน่ง: สัมพัทธ์; ความกว้าง: 80px; ความสูง: 18px; สายไฟ: 18px; พื้นหลัง: #2FC7C9; text-allign: center; สี: #FFF; การตอบสนอง: 0PX 5PX; -WebKit-Border-Radius: 2px; Border-Radius: 2px; มาร์จิ้น: 0 อัตโนมัติ; }. แบบฟอร์ม UPLOAD {ความกว้าง: 100%; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; ความทึบ: 0; ตัวกรอง: alpha (opacity = 0);} .upload ฟอร์มอินพุต {width: 100%;} </style> </head> <body> <div> <img src = "img/1.jpg"/> </div> <div> <p> ภาพอัปโหลด </p> <form>ลักษณะที่ปรากฏดังแสดงในภาพดังนั้นจึงแสดงใน P-TAG "อัพโหลดรูปภาพ" การคลิกมันจะให้เอฟเฟกต์ของการเลือกไฟล์
2. รหัส JS
ฉันเขียนมันค่อนข้างง่ายเพียงแค่ใช้ฟังก์ชั่นพื้นฐานของการอัปโหลด H5
รหัส HTML มีดังนี้การกระทำคือเส้นทางที่จะร้องขอ สิ่งที่ฉันทำที่นี่คือการอัปโหลดและแก้ไขอวตารเมื่อไฟล์เปลี่ยนไป แอตทริบิวต์ชื่อของแท็กอินพุตไม่สามารถละเว้นได้มันเกี่ยวข้องกับอินเตอร์เฟสแบ็กเอนด์
<form id = "uploadform" enctype = "multipart/form-data" method = "post" action = "xxxxxx"> <input type = "file" name = "imageFile" id = "imageFile" onChange = "fileselected ()"/> </form>
var iMaxFilesize = 2097152; //2MWindow.FilesElected = function () {var ofile = document.getElementById ('ImageFile'). ไฟล์ [0]; // อ่านไฟล์ var rfilter =/^(image // bmp | image // gif | image // jpeg | image // png | image // tiff) $/i; if (! rfilter.test (ofile.type)) {Alert ("รูปแบบไฟล์ต้องเป็นรูปภาพ"); กลับ; } ถ้า (OFILE.SIZE> IMAXFILESIZE) {Alert ("ขนาดภาพไม่เกิน 2m"); กลับ; } var vfd = new formData (document.getElementById ('uploadform')), // สร้างคำขอและข้อมูล oxhr = ใหม่ xmlhttprequest (); oxhr.addeventListener ('โหลด', ฟังก์ชั่น (resupload) {// ความสำเร็จ}, false); oxhr.addeventListener ('ข้อผิดพลาด', ฟังก์ชัน () {// ล้มเหลว}, เท็จ); oxhr.addeventListener ('abort', function () {// upload interrupt}, false); oxhr.open ('โพสต์', actionurl); Oxhr.Send (VFD);};รายละเอียดกำหนดความสำเร็จหรือความล้มเหลวดังนั้นคุณต้องดำเนินการทุกอย่างอย่างจริงจัง
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน