Anforderungsanalyse:
Beim Hochladen von Bildern sind die Folgen sehr schwerwiegend, wenn die hochgeladene Bildgröße nicht begrenzt ist. Wie können wir also ein schwieriges Problem lösen? Es gibt zwei Möglichkeiten:
1) Backend -Verarbeitung: Das heißt, der Ajax -Beitrag wird in den Hintergrund übermittelt, das Bild auf den Server hochladen und dann die Bildgröße für die Verarbeitung erhalten.
2) Verarbeitung an der Rezeption: Verwenden Sie JavaScript, um die Bildgröße zu erhalten.
Offensichtlich ist die erste Methode nicht gut. Da Sie die Datei zuerst auf den Server hochladen müssen. Wenn die Datei groß ist, ist das Netzwerk nicht sehr schnell und Sie müssen lange warten, um die Symptome zu behandeln, aber nicht die Grundursache.
Funktionsanalyse:
Hier werde ich nur die verschiedenen Praktiken von IE und Firefox -Browsern einführen.
Dh6:
Schlüsselwort: Dateigröße onReadyStatechange vollständig
In IE6 kann die Dateigröße über die Filesize -Eigenschaft des IMG -Objekts erhalten werden. Der korrekte Wert dieser Dateigröße wird jedoch im gesamten Ereignis von OnReadyStatEchange in erstellt, dh.
<img src = "" onReadyStatechange = "JavaScript: Sizecheck (this);"> Funktion Sizecheck (img) {if (img.readystate == "complete") {alert (img.fileSize); }}Firefox 3.0:
Schlüsselwort: GetasDataurl () FileSize
In Firefox ist es nicht möglich, den vollständigen Pfad zum Hochladen des Bildes zu erhalten, nur der Bildname kann erhalten werden. Der Browser bietet jedoch eine NSIDOMFILE -Schnittstelle, sodass Sie den verarbeiteten Pfad über getasdataurl () erhalten müssen, aber dieser Pfad wirkt sich nicht auf die Anzeige des Bild -SRC aus.
NSIDOMFILE -Schnittstelle:
Domstring getaSbinary (); Domstring getasdataurl (); Domstring GetAsxt (in Domstring -Codierung); <Eingabe type = "Datei" name = "uploadimg" onchange = "JavaScript: checkFilechange (this);" size = "12"/> Funktion checkFilechange (obj) {var img = document.getElementById ("img"); img.src = obj.files [0] .getasDataurl (); Alert (obj.files [0] .FileSize); }Die oben genannten sind die Verarbeitungsmethoden von zwei verschiedenen Browsern. Wie können Sie sie also zusammen integrieren? Ich werde das kleine Beispiel veröffentlichen, das ich unten erstellt habe, wo ich JQuery verwende, um den Erwerb von Objekten zu erleichtern
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml: Lang = "zh" Lang = "zh" Dir = "ltr"> <kopf> <meta http-achb-äquiv = "content-tyPe" content = "text/html; charset = utf-8"/<Script ". src = "lib/jQuery-1.3.2.min.js"> </script> <titels> Überprüfen Sie die hochgeladene Bildgröße </title> <style type var maxSize = 100 * 1024; // Bildgrößenbegrenzung Information VAR ERROR_IMGSIZE = "Bildgröße nicht 100K"; // Standard Bild var nophoto = "imgs/nophoto.gif"; // ist das Bild qualifiziert var issimg = true; /*** Eingabedatei onChange Ereignis* @params obj -Dateiobjekt* @return void **/Funktion checkFileChange (obj) {// Einstellung $ (". ImgTable"). Removeclass ("imgerror"); updatetips (""); var img = $ (". img"). Get (0); var file = obj.value; var exp = /./.jpg|./.gif|./.png|./.bmp/i; if (exp.test (file)) {// Format überprüfen if ($. browser.msie) {// urteilen, ob es sich um IE img.src = Datei handelt; } else {img.src = obj.files [0] .getasDataurl (); Sizecheck (IMG); }} else {img.src = nophoto; $ (". Imgtable"). AddClass ("Imgerror"); Updatetips ("IMG -Format ist falsch"); isimg = false; }} /*** Sizecheck Bildgröße überprüfen* @params img Bildobjekt* @return void ** /Funktion Sizecheck (img) {// Initialisieren Sie die Einstellung $ (". imgtable"). removeclass ("Imgerror"); updatetips (""); if ($ .browser.msie) {// Sehen Sie, ob es sich um IE if (img.readystate == "complete") {if (img.fileSize> maxSize) {$ (". IMGTABLE"). AddClas ("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 = $ ("Eingabe: Datei [name = 'uploadImg']") [0]; if (file.files [0] .FileSize> maxSize) {$ (". imgtable"). AddClass ("Imgerror"); updatetips (error_imgsize); isimg = false; } else {isimg = true; }}} / *** updatetips -Registrierungsfehlermeldung Anzeige* @params str anzeigen Inhalt* @return void ** / function updatetips (str) {$ ("p#errortips"). text (str); } / *** Commit Register und Senden* @return void ** / function Commit () {var isCommit = true; var usrname = $ ("Eingabe: text [name = 'usrname']"), E -Mail = $ ("Eingabe: text [name = 'E -Mail']"), img = $ (". IMG"), Datei = $ ("Eingabe: Datei [Name = 'UploadImg']), frm = document.frm; isCommit = isCommit && isimg; if (isCommit) {frm.action = "über: blank"; Frm.submit (); }} / *** FehlerImg -Bildfehleranzeige* @params img Bildobjekt* @return void ** / Funktion FehlerImg (img) {img.src = nophoto; } </script> </head> <body> <form name="frm" method="post"> <p id="errorTips"> </p> <table cellpadding="1" cellpacing="0"> <tr> <td><label>Name: </label></td> <td><input type="text" name="usrname" maxlength="50"/></td> </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> Bild </label> </td> <td> <td> <table CellPadding = "0" cellpacing = "0"> <tr> <td> <img Src = "imgs/nophoto.gif" src = "src OneRError = "JavaScript: IRREIMG (this);" onReadyStatechange = "JavaScript: Sizecheck (this);"/> </td> </tr> <tr> <td> <Eingabe type = "Datei" name = "uploadImg" onchange = "JavaScript: CheckFilechange (this);" size = "12"/> </td> </tr> </table> </td> </tr> <tr> <td colspan = "2"> <a href = "javaScript: commit ();" rel = "externer nofollow" rel = "externer nofollow" href = "javaScript: commit ();" rel = "externer nofollow" rel = "externe nofollow"> Register </a> </td> </tr> </table> </bildung> </body> </html>