Анализ требований:
При загрузке изображений, если загруженный размер изображения не ограничен, последствия будут очень серьезными. Итак, как мы можем решить сложную проблему? Есть два способа:
1) Обработка бэкэнд: то есть пост Ajax отправляется на фон, загрузите изображение на сервер, а затем получите размер изображения для обработки.
2) Обработка на стойке регистрации: то есть используйте JavaScript, чтобы получить размер изображения.
Очевидно, что первый метод не хорош. Поскольку вам нужно сначала загрузить файл на сервер, если файл большой, сеть не будет очень быстрой, и вам нужно долго ждать, чтобы лечить симптомы, но не коренную причину.
Функциональный анализ:
Здесь я представлю только различные практики IE и браузеры Firefox.
IE6:
Ключевое слово: файлы outreadystateChange
В IE6 размер файла может быть получен с помощью свойства FileSize объекта IMG, но правильное значение этого свойства файлового размера встроено в полном событии OneReadyStateChange, то есть, то есть, то есть, то есть
<img src = "" onreadyStateChange = "javascript: sizecheck (this);"> function sizecheck (img) {if (img.readystate == "complete") {alert (img.filesize); }}Firefox 3.0:
Ключевое слово: getAsdataurl () файлы
В Firefox невозможно получить полный путь для загрузки изображения, можно получить только имя изображения. Тем не менее, браузер обеспечивает интерфейс nsidomfile, поэтому вам необходимо получить обработанный путь через getasdataurl (), но этот путь не влияет на отображение изображения SRC.
nsidomfile интерфейс:
Domstring getAsbinary (); Domstring getasdataurl (); Domstring getaStxt (в кодировании Domstring); <input type = "file" name = "uploadimg" onchange = "javaScript: checkfilechange (this);" size = "12"/> function checkfilechange (obj) {var img = document.getElementById ("img"); img.src = obj.files [0] .getasDataurl (); Alert (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"> <eaf> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <spet-type "" text/html; charset = utf-8 "/> <scret-type =" html; warsef-equiv = "jtml; src = "lib/jquery-1.3.2.min.js"> </script> <Title> Проверьте загруженный размер изображения </title> <style type = "text/css"> .img {ширина: 136px; высота: 102px;} .Imgerror {граница: 3px sloud; 100k var maxsize = 100 * 1024; // Информация об ограничении размера изображения var error_imgsize = "Размер изображения не может превышать 100K"; // изображение по умолчанию var nophoto = "imgs/nophoto.gif"; // - это квалифицированное изображение var isimg = true; /*** Входной файл onChange Event* @params obj file объект* @return void **/function checkfilechange (obj) {// инициализировать настройку $ (". Imgtable"). RemoveClass ("imgerror"); UpdateTips (""); var img = $ (". Img"). get (0); var file = obj.value; var exp = /./.jpg|./.gif|./.png|./.bmp/i; if (exp.test (file)) {// проверить формат if ($. browser.msie) {// Судья, есть ли это ie img.src = file; } else {img.src = obj.files [0] .getasDataurl (); Sizecheck (IMG); }} else {img.src = nophoto; $ (". Imgtable"). addClass ("Imgerror"); UpdateTips («Формат IMG неверен»); iSimg = false; }} /*** SizeCheck Проверьте размер изображения* @params Img Image объект* @return void ** /function sizecheck (img) {// инициализировать настройку $ (". Imgtable"). removeClass ("imgerror"); UpdateTips (""); if ($ .browser.msie) {// посмотреть, есть ли это if 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 = 'uploadimg']") [0]; if (file.files [0] .filesize> maxSize) {$ (". Imgtable"). addClass ("imgerror"); UpdateTips (error_imgsize); iSimg = false; } else {isimg = true; }}} / **** } / *** Зарегистрируется и отправьте* @return void ** / function commit () {var iscommit = true; var usrname = $ ("input: text [name = 'usrname']"), email = $ ("input: text [name = 'email']"), img = $ (". img"), file = $ ("input: file [name = 'uploadimg']"), frm = document.frm; iscommit = iscommit && isimg; if (iscommit) {frm.Action = "О: Blank"; frm.submit (); }} / *** Ошибка ошибки изображения errorimg. } </script> </head> <body> <form name = "frm" method = "post"> <p id = "errortips"> </p> <Таблица CellPadding = "1" сотока = "0"> <Tr> <td> <babel> name: </label> </td> <td> <type = "name =" usrname "max> </td> <td> <input =" name = "usrname"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/" 4 " </tr> <tr> <td> <babel> Пол: </label> </td> <td> <input type = "radio" name = "sex" value = "0"/> male <input type = "radio" = "sex" value = "0"/> wome </td> </tr> <tr> <td> <babel> pectile: </label> </td> </tr> <td> <td> <babel> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <td> <td> <babel> </td> </tr> <Td> name = "email" maxlength = "100"/> </td> </tr> <tr> <td> <lable> image </label> </td> <td> <td> <tablepadding = "0" cellpacing = "0"> <tr> <td> <img src = "imgs/nophoto.gif" src = nophif. OneError = "javascript: errorimg (это);" OnreadyStateChange = "javascript: sizecheck (this);"/> </td> </tr> <tr> <td> <input type = "file" name = "uploadimg" oNchange = "javascript: CheckFileChange (this);" size = "12"/> </td> </tr> </table> </td> </tr> <tr> <td colspan = "2"> <a href = "javaScript: commet ();" rel = "внешний nofollow" rel = "внешний nofollow" href = "javaScript: commit ();" rel = "внешний nofollow" rel = "внешний nofollow"> register </a> </td> </tr> </table> </form> </body> </html>