Analisis Persyaratan:
Saat mengunggah gambar, jika ukuran gambar yang diunggah tidak terbatas, konsekuensinya akan sangat serius. Jadi bagaimana kita bisa memecahkan masalah yang sulit? Ada dua cara:
1) Pemrosesan Backend: Artinya, Ajax Post dikirim ke latar belakang, unggah gambar ke server, dan kemudian dapatkan ukuran gambar untuk diproses.
2) Pemrosesan Meja Depan: Artinya, gunakan JavaScript untuk mendapatkan ukuran gambar.
Jelas metode pertama tidak bagus. Karena Anda perlu mengunggah file ke server terlebih dahulu, jika file tersebut besar, jaringan tidak akan terlalu cepat, dan Anda harus menunggu lama untuk mengobati gejalanya tetapi bukan akar penyebabnya.
Analisis Fungsional:
Di sini saya hanya akan memperkenalkan berbagai praktik browser IE dan Firefox.
IE6:
Kata kunci: FileSize OnReadyStateChange Lengkap
Di IE6, ukuran file dapat diperoleh melalui properti file file dari objek IMG, tetapi nilai yang benar dari properti yang dibuat oleh file ini dibangun di bagian lengkap acara OnReadyStateChange, yaitu,
<img src = "" onReadyStateChange = "JavaScript: sizeCheck (this);"> function sizeCheck (img) {if (img.readystate == "complete") {alert (img.fileSize); }}Firefox 3.0:
Kata kunci: getAsdataurl () Fileze
Di Firefox, tidak mungkin untuk mendapatkan jalur lengkap untuk mengunggah gambar, hanya nama gambar yang dapat diperoleh. Namun, browser menyediakan antarmuka nsidomfile, jadi Anda perlu mendapatkan jalur yang diproses melalui getasdataurl (), tetapi jalur ini tidak mempengaruhi tampilan gambar SRC.
Antarmuka Nsidomfile:
Domstring getasbinary (); Domstring getasdataurl (); Domstring getastext (dalam pengkodean domString); <input type = "file" name = "unggah" onchange = "javascript: checkFileChange (ini);" size = "12"/> function checkFileChange (obj) {var img = document.geteLementById ("img"); img.src = obj.files [0] .getasDataurl (); waspada (obj.files [0] .filesize); }Di atas adalah metode pemrosesan dari dua browser yang berbeda, jadi bagaimana Anda mengintegrasikannya bersama? Saya akan memposting contoh kecil yang saya buat di bawah ini, di mana saya menggunakan jQuery untuk memfasilitasi akuisisi objek
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src = "lib/jQuery-1.3.2.min.js"> </script> <itement> Periksa ukuran gambar yang diunggah </iteme> <style type = "text/css"> .img {width: 136px; Tinggi: 102px;} .Imgerror {border: 3px solid; var maxsize = 100 * 1024; // Ukuran gambar informasi batas var error_imgsize = "Ukuran gambar tidak dapat melebihi 100k"; // gambar default var nophoto = "imgs/nophoto.gif"; // adalah gambar yang memenuhi syarat var isimg = true; /*** File input Acara Onchange* @params obj objek file* @return void **/function checkFileChange (obj) {// inisialisasi pengaturan $ (". Imgtable"). RemoveClass ("imgerRor"); UpdateTips (""); var img = $ (". img"). get (0); var file = obj.value; var exp = /./.jpg|./.gif|./.png|./.bmp/i; if (exp.test (file)) {// verifikasi format if ($. browser.msie) {// menilai apakah itu yaitu img.src = file; } else {img.src = obj.files [0] .getAsDataurl (); SizeCheck (IMG); }} else {img.src = nophoto; $ (". Imgtable"). AddClass ("ImgerRor"); UpdateTips ("Format IMG salah"); isimg = false; }} /*** SizeCheck Periksa ukuran gambar* @params IMG objek gambar* @return void ** /function sizeCheck (img) {// inisialisasi pengaturan $ (". imgtable"). RemoveClass ("imgerror"); UpdateTips (""); if ($ .browser.msie) {// lihat apakah itu yaitu if (img.readystate == "complete") {if (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 = $ ("input: file [name = 'unggah']") [0]; if (file.files [0] .filesize> maxSize) {$ (". imgtable"). addClass ("imgerror"); updateTips (error_imgsize); isimg = false; } else {isimg = true; }}} / *** Tampilan Pesan Kesalahan Registrasi UpdateTips* @params STR Display Konten* @return void ** / function UpdateTips (str) {$ ("p#errorTips"). Teks (str); } / *** Commit Register dan kirim* @return void ** / function commit () {var isCommit = true; var usrname = $ ("Input: Text [name = 'usrname']"), email = $ ("Input: Text [name = 'email']"), img = $ (". img"), file = $ ("input: file [name = 'unggah']"), frm = document.frm; isCommit = isCommit && isimg; if (isCommit) {frm.action = "tentang: blank"; frm.submit (); }} / *** Tampilan kesalahan gambar errorImg* @params IMG objek gambar* @return void ** / function errorImg (img) {img.src = nophoto; } </script> </head> <body> <form name = "frm" method = "post"> <p id = "errorips"> </p> <table cellpadding = "1" cellPacing = "0"> <TR> <TD> <label> Nama: </LABEL> </TD> <td> <TR> TEKS = "TEKS =" </tr> <tr> <td><label>Gender: </label></td> <td><input type="radio" name="sex" value="0"/>Male<input type="radio" name="sex" value="0"/>Female</td> </tr> <tr> <td><label>Email: </label></td> <td><input type="text" name = "email" maxlength = "100"/> </td> </tr> <tr> <td> <lable> gambar </label> </td> <td> <td> <Table CellPadding = "0" CellPacing = "0"> <td> <mmg src = "IMGS/NOPHOTOOF" "SREF" <t "src =" IMGS/NOPHOTOOF "" src = "IMGS/NOPHOTO/NOPHOTOF" OneError = "JavaScript: errorImg (this);" onreadystatechange = "JavaScript: sizeCheck (this);"/> </td> </tr> <tr> <td> <input type = "file" name = "unggah" onchange = "javascript: checkfileChange (ini);" size = "12"/> </td> </tr> </able> </td> </tr> <tr> <td colspan = "2"> <a href = "javascript: commit ();" rel = "eksternal nofollow" rel = "eksternal nofollow" href = "javascript: commit ();" rel = "eksternal nofollow" rel = "nofollow eksternal"> register </a> </td> </tr> </able> </form> </body> </html>