การวิเคราะห์ข้อกำหนด:
เมื่ออัปโหลดรูปภาพหากขนาดภาพที่อัปโหลดไม่ จำกัด ผลที่ตามมาจะร้ายแรงมาก แล้วเราจะแก้ปัญหาที่ยากได้อย่างไร? มีสองวิธี:
1) การประมวลผลแบ็กเอนด์: นั่นคือโพสต์ AJAX จะถูกส่งไปยังพื้นหลังอัปโหลดภาพไปยังเซิร์ฟเวอร์จากนั้นรับขนาดภาพสำหรับการประมวลผล
2) การประมวลผลแผนกต้อนรับ: นั่นคือใช้ JavaScript เพื่อรับขนาดภาพ
เห็นได้ชัดว่าวิธีแรกไม่ดี เนื่องจากคุณต้องอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ก่อนหากไฟล์มีขนาดใหญ่เครือข่ายจะไม่เร็วมากและคุณต้องรอเป็นเวลานานในการรักษาอาการ แต่ไม่ใช่สาเหตุที่แท้จริง
การวิเคราะห์การทำงาน:
ที่นี่ฉันจะแนะนำการปฏิบัติที่แตกต่างกันของเบราว์เซอร์ IE และ Firefox เท่านั้น
IE6:
คำหลัก: Filesize OnReadingStateChange เสร็จสมบูรณ์
ใน IE6 ขนาดไฟล์สามารถรับได้ผ่านคุณสมบัติขนาดไฟล์ของวัตถุ IMG แต่ค่าที่ถูกต้องของคุณสมบัติไฟล์ไฟล์นี้ถูกสร้างขึ้นในเหตุการณ์ OnReadyStateChange ที่สมบูรณ์นั่นคือ
<img src = "" onreadyStateChange = "JavaScript: SizeCheck (this);"> ฟังก์ชั่น sizecheck (img) {ถ้า (img.readystate == "เสร็จสมบูรณ์") {แจ้งเตือน (img.filesize); -Firefox 3.0:
คำหลัก: getAsDataUrl () ไฟล์
ใน Firefox มันเป็นไปไม่ได้ที่จะได้รับเส้นทางเต็มรูปแบบเพื่ออัปโหลดภาพเท่านั้นที่สามารถรับชื่อภาพได้ อย่างไรก็ตามเบราว์เซอร์ให้อินเทอร์เฟซ NSIDOMFILE ดังนั้นคุณต้องได้รับเส้นทางที่ผ่านการประมวลผลผ่าน getASDATAURL () แต่เส้นทางนี้ไม่ส่งผลกระทบต่อการแสดงผลของภาพ SRC
อินเตอร์เฟส NSIDOMFILE:
Domstring getasbinary (); Domstring getasdataurl (); domstring getastext (ในการเข้ารหัส Domstring); <input type = "file" name = "uploadimg" onChange = "JavaScript: CheckFileChange (นี่);" size = "12"/> ฟังก์ชั่น checkfilechange (obj) {var img = document.getElementById ("img"); img.src = obj.files [0] .getasdataurl (); การแจ้งเตือน (obj.files [0] .filesize); -ข้างต้นเป็นวิธีการประมวลผลของเบราว์เซอร์สองตัวที่แตกต่างกันดังนั้นคุณจะรวมเข้าด้วยกันได้อย่างไร? ฉันจะโพสต์ตัวอย่างเล็ก ๆ ที่ฉันทำด้านล่างซึ่งฉันใช้ jQuery เพื่ออำนวยความสะดวกในการได้มาของวัตถุ
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh" lang = "zh" dir = "ltr"> <head> src = "lib/jQuery-1.3.2.min.js"> </script> <title> ตรวจสอบขนาดภาพที่อัปโหลด </title> <style type = "text/css"> .img {width: 136px; ความสูง: 102px;} 100K var maxSize = 100 * 1024; // ขนาดภาพ จำกัด ข้อมูล var error_imgsize = "ขนาดภาพไม่เกิน 100k"; // ภาพเริ่มต้น var nophoto = "imgs/nophoto.gif"; // เป็นภาพ var ที่ผ่านการรับรอง isimg = true; /*** อินพุตไฟล์ onChange* @params OBJ File Object* @return เป็นโมฆะ **/ฟังก์ชั่นตรวจสอบ FileChange (OBJ) {// เริ่มต้นการตั้งค่า $ (". imgTable"). RemoveClass ("Imgerror"); updateTips (""); var img = $ (". img") รับ (0); var file = obj.value; var exp = /./.jpg|./.gif|./.png|./.bmp/i; if (exp.test (ไฟล์)) {// ตรวจสอบรูปแบบถ้า ($. browser.msie) {// ตัดสินว่าเป็น img.src = ไฟล์; } else {img.src = obj.files [0] .getasdataurl (); Sizecheck (IMG); }} else {img.src = nophoto; $ (". imgtable"). addclass ("imgerror"); updateTips ("รูปแบบ IMG ไม่ถูกต้อง"); isimg = false; }} /*** Sizecheck ตรวจสอบขนาดภาพ* @params img image object* @return เป็นโมฆะ ** /ฟังก์ชั่น sizecheck (img) {// เริ่มต้นการตั้งค่า $ (". imgtable"). RemoveClass ("Imgerror"); updateTips (""); if ($ .browser.msie) {// ดูว่าเป็นเช่น (img.readystate == "เสร็จสมบูรณ์") {ถ้า (img.filesize> maxsize) {$ (". imgtable"). addclass ("imgerror"); updateTips (error_imgsize); isimg = false; } else {isimg = true; }} else {$ (". imgtable"). addClass ("imgerror"); updateTips (error_imgsize); isimg = false; } else {isimg = true; }} else {$ (". imgtable"). addClass ("imgerror"); updateTips (error_imgsize); isimg = false; }} else {var file = $ ("อินพุต: ไฟล์ [name = 'uploadimg']") [0]; if (file.files [0] .filesize> maxSize) {$ (". imgTable"). addClass ("imgerror"); updateTips (error_imgsize); isimg = false; } else {isimg = true; }}} / *** updateTips ข้อความแสดงข้อผิดพลาดการลงทะเบียนแสดง* @params st st str แสดงเนื้อหา* @return เป็นโมฆะ ** / ฟังก์ชัน updateTips (str) {$ ("p#errortips") ข้อความ (str); } / *** ลงทะเบียนและส่ง* @return เป็นโมฆะ ** / ฟังก์ชั่น commit () {var isCommit = true; var usrName = $ ("อินพุต: text [name = 'usrName']"), email = $ ("อินพุต: text [name = 'email']"), img = $ (". img"), ไฟล์ = $ ("อินพุต: file [name = 'uploadimg']"), frm = document.frm; ISCOMMIT = ISCOMMIT && ISIMG; if (iscommit) {frm.action = "เกี่ยวกับ: blank"; frm.submit (); }} / *** ข้อผิดพลาดของภาพข้อผิดพลาดการแสดงผล* @params img image object* @return เป็นโมฆะ ** / function errorimg (img) {img.src = nophoto; } </script> </head> <body> <form name = "frm" method = "post"> <p id = "errortips"> </p> <table cellpadding = "1" cellpacing = "0"> <tr> <td> <tr> <td> <dable> เพศ: </label> </td> <td> <อินพุตประเภท = "วิทยุ" name = "sex" value = "0"/> male <อินพุต type = "Radio" name = "sex" value = "0"/> ผู้หญิง </td> </tr> <td> <td> maxlength = "100"/> </td> </tr> <tr> <td> <lable> ภาพ </label> </td> <td> <td> <table cellpadding = "0" cellpacing = "0"> <tr> <td> oneError = "JavaScript: errorImg (นี่);" OnReadyStateChange = "JavaScript: SizeCheck (นี่);"/> </td> </tr> <tr> <td> <อินพุต type = "file" name = "uploadimg" onChange = "JavaScript: CheckFileChange (นี่);" size = "12"/> </td> </tr> </table> </td> </tr> <tr> <td colspan = "2"> <a href = "JavaScript: commit ();" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" href = "JavaScript: commit ();" rel = "ภายนอก nofollow" rel = "ภายนอก nofollow"> ลงทะเบียน </a> </td> </tr> </table> </form> </body> </html>