تحليل المتطلبات:
عند تحميل الصور ، إذا كان حجم الصورة المحمّلة غير محدود ، فستكون العواقب خطيرة للغاية. فكيف يمكننا حل مشكلة صعبة؟ هناك طريقتان:
1) معالجة الواجهة الخلفية: أي ، يتم إرسال منشور Ajax إلى الخلفية ، وتحميل الصورة إلى الخادم ، ثم الحصول على حجم الصورة للمعالجة.
2) معالجة مكتب الاستقبال: أي ، استخدم JavaScript للحصول على حجم الصورة.
من الواضح أن الطريقة الأولى ليست جيدة. نظرًا لأنك تحتاج إلى تحميل الملف على الخادم أولاً ، إذا كان الملف كبيرًا ، فلن تكون الشبكة سريعة جدًا ، وتحتاج إلى الانتظار لفترة طويلة لعلاج الأعراض ولكن ليس السبب الجذري.
التحليل الوظيفي:
هنا سأقدم فقط الممارسات المختلفة لمتصفحات IE و Firefox.
IE6:
الكلمة الرئيسية: ملفات onReadyStatechange كاملة
في IE6 ، يمكن الحصول على حجم الملف من خلال خاصية FileSize لكائن IMG ، ولكن القيمة الصحيحة لخاصية ملفات ملفات موجودة في الحدث الكامل لحدث onReadyStateChange ، وهذا هو ،
<img src = "" onReadyStateChange = "javaScript: sizeCheck (this) ؛"> function sizecheck (img) {if (img.readyState == "COMMUNT") {Alert (img.filesize) ؛ }}Firefox 3.0:
الكلمة الرئيسية: getasdataurl () ملفات
في Firefox ، لا يمكن الحصول على المسار الكامل لتحميل الصورة ، فقط يمكن الحصول على اسم الصورة. ومع ذلك ، يوفر المتصفح واجهة nsidomfile ، لذلك تحتاج إلى الحصول على المسار المعالج من خلال getasdataurl () ، ولكن هذا المسار لا يؤثر على عرض الصورة SRC.
واجهة nsidomfile:
domstring getAsbinary () ؛ domstring getasdataurl () ؛ domstring getastext (في ترميز domstring) ؛ <type type = "file" name = "uploadimg" onChange = "javaScript: checkFileChange (this) ؛" 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" xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh" lang = "zh" dir = "ltr"> <head> <meta http-equiv = "content-type" content = "text/html ؛ src = "lib/jquery-1.3.2.min.js"> </script> </title> تحقق من حجم الصورة المحمّل </title> <type type = "text/css" 100k var maxSize = 100 * 1024 ؛ // معلومات حجم الصورة var error_imgsize = "حجم الصورة لا يمكن أن يتجاوز 100 كيلو" ؛ // الصورة الافتراضية var nophoto = "imgs/nophoto.gif" ؛ // هل الصورة مؤهلة var isimg = true ؛ /*** ملف الإدخال onChange event* params obj file object* return void **/function checkFileChange (obj) {// تهيئة الإعداد $ ( updatetips ("") ؛ var img = $ (". img"). get (0) ؛ ملف var = obj.value ؛ var exp = /./.jpg|./.gif|./.png| if (exp.test (file)) {// تحقق من التنسيق if ($. browser.msie) {// ugn arm is ie img.src = file ؛ } else {img.src = obj.files [0] .getAsdataurl () ؛ SizeCheck (IMG) ؛ }} آخر {img.src = nophoto ؛ $ (". imgtable"). addClass ("imgerror") ؛ updatetips ("تنسيق IMG غير صحيح") ؛ ISIMG = خطأ ؛ }} /*** sizecheck حجم الصورة* params كائن صورة IMG* return void ** /وظيفة sizecheck (img) {// تهيئة الإعداد $ (". imgtable"). removeClass ("imgerror") ؛ updatetips ("") ؛ if ($ .browser.msie) {// معرفة ما إذا كان IE if (img.readyState == "COMMUNT") {if (img.filesize> maxSize) {$ (". imgtable"). addClass ("imgerror") ؛ updatetips (error_imgsize) ؛ ISIMG = خطأ ؛ } آخر {isimg = true ؛ }} آخر {$ (". imgtable"). addClass ("imgerror") ؛ updatetips (error_imgsize) ؛ ISIMG = خطأ ؛ } آخر {isimg = true ؛ }} آخر {$ (". imgtable"). addClass ("imgerror") ؛ updatetips (error_imgsize) ؛ ISIMG = خطأ ؛ }} else {var file = $ ("input: file [name = 'UploadImg']") [0] ؛ if (file.files [0] .filesize> maxSize) {$ (". imgtable"). addClass ("imgerror") ؛ updatetips (error_imgsize) ؛ ISIMG = خطأ ؛ } آخر {isimg = true ؛ }}} / *** updatetips عرض رسالة خطأ التسجيل* params STR Display Content* return void ** / function updatetips (str) {$ ("p#errortips"). text (str) ؛ } / *** ارتكاب سجل وإرسال* @return void ** / وظيفة الالتزام () {var isCommit = true ؛ var usrname = $ ("input: text [name = 'usrname']") ، email = $ ("input: text [name = 'email']) ، img = $ (". img ") ، file = $ (" input: file = 'uploadimg']) ، frm = document.frm ؛ iSCommit = isCommit && isimg ؛ if (isCommit) {frM.Action = "about: blank" ؛ frm.submit () ؛ }} / *** خطأ خطأ في الصورة* params كائن صورة IMG* return void ** / function errormg (img) {img.src = nophoto ؛ } </script> </head> <body> <form name = "frm" method = "post"> <p id = "errortips"> </p> <table cellpadding = "1" cellpacing = "0 ' </tr> <tr> <td> <label> الجنس: </label> </td> <td> <type type = "radio" name = "sex" value = "0"/> male <input type = "radio" name = "sex" value = "0"/> female </td> MaxLength = "100"/> </td> </tr> <tr> <td> <td> <lable> صورة </label> </td> <td> <td> <table cellpadding = "0" cellpacing = "0"> <td> <td> <td src = imgs/nophoto.gif oneerror = "javaScript: errorimg (this) ؛" onReadyStateChange = "javaScript: sizecheck (this) ؛"/> </td> </tr> <tr> <td> <type type = "file" name = "uploadimg" onChange = "javaScript: CheckFileChange (this) ؛" size = "12"/> </td> </tr> </lood> </td> </tr> <tr> <td colspan = "2" rel = "خارجي nofollow" rel = "خارجي nofollow" href = "javaScript: commice () ؛" rel = "nofollow" reco = "nofollow"> التسجيل </a> </td> </tr> </table> </form> </body> </html>