JavaScript verify upload picture size [foreground handling]_javascript Tips

Requirements Analysis:

In doing upload pictures, if you do not limit the size of the upload picture, the consequences are very serious. So how can we solve a thorny problem? There are two ways of doing this:
1) Background processing: That is, Ajax Post submitted to the background, the picture uploaded to the server, and then get the image size to do processing.
2 foreground processing: that is, use JavaScript to get the picture size.
Obviously the first way, very bad. Because the need to upload files to the server first, if the file is very large, in addition to the Internet is not very fast, need to wait for a long time, not a cure.

Function Resolution:

Here I only introduce the different practices of IE and Firefox two browsers.
IE6:
Keywords: fileSize onreadystatechange complete
In IE6, the file size can be obtained through the FileSize property of the IMG object, but the correct value of the FileSize property is based on the complete of the onReadyStateChange event, which is

 
function Sizecheck (img) { 

if (img.readystate = = "complete") { 
alert (img.filesize); 
} 
}

FireFox3.0:
Keywords: getasdataurl () fileSize
In Firefox security considerations, can not get the full path of uploaded pictures, only get picture name. However, the browser provides nsidomfile such an interface, so you need to obtain the processed path via Getasdataurl (), but the path does not affect the picture src display.
Nsidomfile Interface:

Domstring getasbinary (); 
Domstring Getasdataurl (); 
Domstring Getastext (in domstring encoding); 


<input type= "File" Name= "uploadimg" 
onchange= "Javascript:checkfilechange (this);" 
size= "/> 
function Checkfilechange (obj) { 
var img = document.getElementById (" img "); 
IMG.SRC = Obj.files[0].getasdataurl (); 
alert (obj.files[0].filesize); 
}

These are the two different browsers to deal with, so how to integrate them together? I'll post a small example of what I do below, where I use jquery to facilitate and get objects

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">