Analyse des exigences:
Lors du téléchargement d'images, si la taille de l'image téléchargée n'est pas limitée, les conséquences seront très graves. Alors, comment pouvons-nous résoudre un problème difficile? Il y a deux façons:
1) Traitement du backend: c'est-à-dire que l'ajax Post est soumis à l'arrière-plan, téléchargez l'image sur le serveur, puis obtenez la taille de l'image pour le traitement.
2) Traitement de la réception: c'est-à-dire utiliser JavaScript pour obtenir la taille de l'image.
De toute évidence, la première méthode n'est pas bonne. Parce que vous devez d'abord télécharger le fichier sur le serveur, si le fichier est grand, le réseau ne sera pas très rapide et vous devez attendre longtemps pour traiter les symptômes mais pas la cause profonde.
Analyse fonctionnelle:
Ici, je ne présenterai que les différentes pratiques des navigateurs IE et Firefox.
IE6:
Mots-clés: Files size onreadystateChange Complete
Dans IE6, la taille du fichier peut être obtenue via la propriété de taille de fichiers de l'objet IMG, mais la valeur correcte de cette propriété de taille de fichiers est construite dans le complet de l'événement OnreadyStateChange, c'est-à-dire, c'est-à-dire, c'est-à-dire,
<img src = "" OnReadyStateChange = "javaScript: sizecheck (this);"> function sizecheck (img) {if (img.readystate == "complet") {alert (img.fileSize); }}Firefox 3.0:
Mots-clés: GetAsDataurl () Fige size
Dans Firefox, il n'est pas possible d'obtenir le chemin complet pour télécharger l'image, seul le nom de l'image peut être obtenu. Cependant, le navigateur fournit une interface nsidomfile, vous devez donc obtenir le chemin traité via getasdataurl (), mais ce chemin n'affecte pas l'affichage de l'image SRC.
Interface nsidomfile:
DomString getasbinary (); DomString getasdataurl (); DomString getastext (dans Domstring Encoding); <input type = "file" name = "uploadimg" onchange = "javascript: checkFileChange (this);" size = "12" /> Fonction CheckFileChange (obj) {var img = document.getElementById ("img"); img.src = obj.files [0] .getaSDataurl (); alert (obj.files [0] .FileSize); }Ce qui précède sont les méthodes de traitement de deux navigateurs différents, alors comment les intégrez-vous ensemble? Je publierai le petit exemple que j'ai fait ci-dessous, où j'utilise jQuery pour faciliter l'acquisition d'objets
<! 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"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <pree type = "text / javascript" src = "lib / jQuery-1.3.2.min.js"> </ script> <itle> Vérifiez la taille de l'image téléchargée </ title> <style type = "Text / CSS"> .img {width: 136px; height: 102px;} .imgerror {border: 3px Solid Image </ style> <script type = "Text / javascript"> // limite} var maxsize = 100 * 1024; // Taille d'image Informations de limite Var Error_imgsize = "La taille de l'image ne peut pas dépasser 100k"; // image par défaut var nophoto = "imgs / nophoto.gif"; // est l'image qualifiée var isImg = true; / ** * ENVILLE ENCHANGE FILE ENCHAGE * @Params Objet de fichier OBJ * @return void ** / fonction CheckFileChange (obj) {// Initialize setting $ (". IMGTABLE"). RemoveClass ("imgerror"); UpdateTips (""); var img = $ (". img"). get (0); var fichier = obj.value; var exp = /./.jpg|./.gif|./.png|./.bmp/i; if (exp.test (fichier)) {// Vérifiez le format if ($. Browser.msie) {// juger si c'est IE IMG.Src = fichier; } else {img.src = obj.files [0] .getaSDataurl (); Sizecheck (IMG); }} else {img.src = nophoto; $ (". imgTable"). addClass ("imgerror"); UpdateTips ("Le format IMG est incorrect"); iSImg = false; }} / ** * SizeCheck Check Image Taille * @params IMG Image Object * @return void ** / fonction SizeCheck (img) {// Initialize le paramètre $ (". IMGTABLE"). RemoveClass ("imgerror"); UpdateTips (""); if ($ .browser.msie) {// voir si c'est ie if (img.readystate == "complet") {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; }}} / ** * UpdateTips Enregistrement Message d'erreur Affichage * @params Str Contenu du contenu * @return void ** / fonction updatetips (str) {$ ("p # errortips"). text (str); } / ** * engagez le registre et soumettez * @return void ** / fonction commit () {var isCommit = true; var usrname = $ ("input: text [name = 'usrname']"), e-mail = $ ("input: text [name = 'email']"), img = $ (". img"), file = $ ("input: file [name = 'uploadImg']"), frm = document.frm; isCommit = isCommit && isImg; if (isCommit) {Frm.Action = "About: Blank"; Frm.Submit (); }} / ** * ErrorImg Image Error Affichage * @params IMG Image Object * @return void ** / fonction errorImg (img) {img.src = nophoto; } </ script> </ head> <body> <form name = "frm" metheth = "post"> <p id = "errortips"> </p> <table cellpadding = "1" cellpacing = "0"> <tr> <td> <bablows name: </ label> </ td> <td> <entrée = "Text" Name = "usrname" MaxLastg </tr> <tr> <td> <bable> Gender: </ Label> </td> <Td> <Input Type = "Radio" name = "Sex" value = "0" /> mâle <entrée = "Radio" name = "Sex" Value = "0" /> Female </td> </ Tr> <TR> <TD> <T-Label> "Email: </ Label> </td> <Td> maxLengthreau = "100" /> </td> </tr> <tr> <td> <nable> image </ label> </td> <td> <td> <table cellpadding = "0" cellpacing = "0"> <tr> <td> <img src = "imgs / nophoto.gif" src = "imgs / nophoto.gif" oneError = "JavaScript: errorImg (this);" 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: commit ();" rel = "externe nofollow" rel = "externe nofollow" href = "javascript: commit ();" rel = "external nofollow" rel = "external nofollow"> registre </a> </td> </tr> </ table> </ form> </ body> </html>