โครงการแรกได้เปิดตัวในที่สุด มันเป็นแพลตฟอร์มการระดมทุนของสาธารณะที่เรียกว่า Qinqingchou ส่วนใหญ่ของ WeChat, คอมพิวเตอร์และอินเทอร์เฟซแบ็คเอนด์เสร็จสมบูรณ์แล้ว หลังจากผ่านไปสองสามเดือนฉันรู้สึกว่าฉันได้รับมากและฉันคิดว่าฉันต้องสรุป
สิ่งแรกที่นึกถึงคือปัญหาของการอัปโหลดรูปภาพ เมื่อ Ajax ข้อมูลแบบฟอร์มอัพโหลดจะรู้สึกโง่ที่จะใช้แบบฟอร์มเพื่ออัปโหลดรูปภาพ จากนั้นในเวลานั้นฉันไม่คิดว่าจะใช้ปลั๊กอินแบบฟอร์ม jQuery
วิธีการแก้ปัญหาที่เพื่อนร่วมงานที่ได้รับในพื้นหลังคือการเขียนแบบฟอร์มใน iframe จากนั้นอัปโหลดรูปภาพและส่งแบบฟอร์มโดยอัตโนมัติ เขาจะข้ามไปที่ที่อยู่ของภาพบนเซิร์ฟเวอร์ไปยัง URL ของหน้าและฉันจะสกัดกั้น
โซลูชัน 1: ฟอร์มฟอร์ม iframe+
<form action = "/user/uploadidcard.do" enctype = "multipart/form-data" method = "post"> <input type = "file" id = "uploadpic" name = "file"> <label for = "uploadpic" id = "filebtn">+<img src = "/> $ (". turnurl"). val (window.location.pathname); $ ("#uploadpic"). on ('เปลี่ยน', ฟังก์ชั่น (เหตุการณ์) {event.preventdefault (); $ ("แบบฟอร์ม") ส่ง ();});แนะนำ iframe ในอินเทอร์เฟซที่ต้องอัปโหลดรูปภาพโทรหาวิธี iframe ในไลบรารีสาธารณะรับ URL ของรูปภาพและแสดงภาพใน iframe
// แยกเส้นทางในฟังก์ชัน iframe iframe (el) {var baseUrl = ""; รหัส var, filepath; var place = $ (el) [0] .contentWindow.location.Search; console.log (สถานที่); ถ้า (สถานที่) {code = place.match (/code = d+/) [0] {filepath = place.match (/filepath =/s+/) [0] .substr (9);} $ (el). contents (). ค้นหา ("เคล็ดลับ"). css ('สี', '#d0021b'); console.log (filepath); ประสบความสำเร็จ '); $ (el) .contents (). ค้นหา (". เคล็ดลับ"). css (' สี ','#55a012 '); $ (el). "206": $ (el) .contents (). ค้นหา (". เคล็ดลับ") ข้อความ ('ไฟล์ใหญ่เกินไป'); ทำลายกรณี "207": $ (el).การแก้ปัญหา 2: ต่อมาฉันพบว่ามีสองปัญหาเกี่ยวกับวิธีการนี้ หนึ่งคือรูปภาพที่ส่งโดยผู้ใช้มีขนาดใหญ่เกินไปและพื้นหลังไม่ได้บีบอัดมัน (เพื่อนร่วมงานในพื้นหลังยุ่งเกินไปเพื่อรองรับพวกเขาเราได้บีบอัดมันที่ปลายด้านหน้า)
ประการที่สองคือหลังจากการอัปโหลดของภาพสำเร็จแล้วภาพจะปรากฏบน iframe ซึ่งต้องใช้เวลาตอบสนองที่แน่นอน บางครั้งผู้ใช้จะรายงานว่าภาพไม่สามารถอัปโหลดได้ แต่อันที่จริงแล้วมันเป็นเพียงพื้นหลังที่ยังไม่ได้กลับมา ...
ดังนั้นฉันจึงตัดสินใจที่จะอัปโหลดไปยังพื้นหลังโดยใช้ Base64
<input type = "file" id = "uploadpic" name = "file"> <label for = "uploadpic" id = "filebtn">+<img src = ""/> </label> <span> โปรดอัปโหลดภาพขนาดอยู่ภายใน 2m <br/> 640*400 </span> <อินพุต type = "text" name = "turnUrl"> <canvas id = "uploadimg" style = "แสดง: ไม่มี"> </canvas>
โครงสร้างคล้ายกับเดิม แต่มีผืนผ้าใบพิเศษ
$ ("#uploadpic"). on ('เปลี่ยน', ฟังก์ชั่น (เหตุการณ์) {event.preventdefault (); console.log ($ (นี่) [0] .files); var file = $ (this) [0] .files [0]; if (file.size> 2097152) (!/image /// w+/. test (file.type)) {Alert ("ไฟล์ต้องเป็นภาพ!"); return false;} var reader = new filereader (); reader.readasdataUrl (ไฟล์); reader.onload = function (e) document.getElementById ("uploadimg"); var cxt = canvas.getContext ('2d'); canvas.width = 640; canvas.height = 400; var img = ภาพใหม่ (); img.src = src; img.onload = function () Canvas.width = w; // canvas.height = h; cxt.drawimage (img, 0, 0,640,400); // cxt.drawimage (img, 0, 0); $ (". showpic") "/front/uploadbybase64.do",type:" โพสต์ ", ข้อมูล: {" imgstr ": canvas.todataurl (" รูปภาพ/jpeg ", 0.9) .split (',') [1]}, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {console.log (data); data.url);}});}}1. ก่อนอื่นให้ใช้ข้อมูลของไฟล์อินพุตไฟล์เพื่อกำหนดไฟล์ขนาดไฟล์ขนาดและไฟล์ว่าไฟล์เป็นไฟล์ image.type
2. จากนั้นใช้อินเทอร์เฟซ filereader ของ HTML5 เพื่อรับข้อมูล BASE64 ของภาพนี้
3. ผ่านฐานนี้ 64 ลงในผืนผ้าใบและทำหน้าที่เป็น SRC ของรูปภาพ ในเวลานี้คุณสามารถตั้งค่าขนาดความละเอียดของรูปภาพเพื่อให้แน่ใจว่ารูปภาพที่อัปโหลดมีความละเอียดแบบครบวงจร แน่นอนว่ามันสามารถขึ้นอยู่กับขนาดดั้งเดิมของภาพ
4. ก่อน AJAX แสดง Base64 ที่ประมวลผลโดยตรง (เพื่อให้ผู้ใช้สามารถเห็นภาพที่อัปโหลดได้ทันที) จากนั้นผ่าน Canvas.todataurl ("image/jpeg", 0.9) .split (',') [1]
5. จากนั้นผูก URL ที่ส่งคืนในพื้นหลังไปยังคุณสมบัติ Data-URL ของภาพและเพิ่งได้รับ url data-url เมื่อส่ง Ajax เพื่อให้ผู้ใช้สามารถมองเห็นได้เร็วที่สุดเท่าที่จะเป็นไปได้และ URL ยังคงอยู่ในกระบวนการของ Ajax ไปยังพื้นหลัง
Postscript: มีปัญหาเกี่ยวกับการแก้ปัญหาทั้งสองซึ่งจะอัปโหลดรูปภาพซ้ำซ้อนจำนวนมากไปยังพื้นหลัง แต่เพื่อนร่วมงานในพื้นหลังดูเหมือนจะไม่มีการคัดค้าน
เอฟเฟกต์จริงก็เหมือนกับ http://www.qqchou.org/qqcweb/pages/photoiframe.html
ด้านบนคือการฝึกฝนโครงการแบบฟอร์มการอัปโหลดรูปภาพหรือการบีบอัดภาพส่วนหน้าของ Base64 (การบีบอัดภาพส่วนหน้า) แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!