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, upload the picture to the server, and then get the image size to do processing.
2) front desk handling: 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
Copy Code code as follows:
Onreadystatechange= "Javascript:sizecheck (this);" >
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);
Copy Code code as follows:
<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 will post a small example of what I do below, where I use jquery to facilitate and get objects.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Lib/jquery-1.3.2.min.js" ></script>
<title> Check upload picture size </title>
<style type= "Text/css" >
. img {width:136px;height:102px;}
. imgerror{border:3px solid Red;
</style>
<script type= "Text/javascript" >
Limit upload image size 100K
var MAXSIZE = 100 * 1024;
Picture size limit Information
var error_imgsize = "Picture size cannot exceed 100K";
Default picture
var Nophoto = "Imgs/nophoto.gif";
Whether the picture is qualified
var isimg = true;
/**
* Input File onchange Event
* @params obj File object
* @return void
**/
function Checkfilechange (obj) {
Initialization settings
$ (". Imgtable"). Removeclass ("Imgerror");
Updatetips ("");
var img = $ (". IMG"). Get (0);
var file = Obj.value;
var exp =/.\.jpg|. \.gif|. \.png|. \.bmp/i;
if (exp.test (file)) {//Validate format
if ($.browser.msie) {//Determine if IE
img.src = file;
} else {
IMG.SRC = Obj.files[0].getasdataurl ();
Sizecheck (IMG);
}
} else {
IMG.SRC = Nophoto;
$ (". Imgtable"). AddClass ("Imgerror");
Updatetips ("Incorrect picture format");
Isimg = false;
}
}
/**
* Sizecheck Check picture size
* @params img Image Object
* @return void
**/
function Sizecheck (IMG) {
Initialization settings
$ (". Imgtable"). Removeclass ("Imgerror");
Updatetips ("");
if ($.browser.msie) {//See if IE
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 {
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 Registration Error message display
* @params STR display content
* @return void
**/
function Updatetips (str) {
$ ("P#errortips"). Text (str);
}
/**
* Commit Registration
* @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 = "About:blank";
Frm.submit ();
}
}
/**
* ERRORIMG Picture Error display
* @params img Image Object
* @return void
**/
function Errorimg (IMG) {
IMG.SRC = Nophoto;
}
</script>
<body>
<form name= "frm" method= "post" >
<p id= "Errortips" > </p>
<table cellpadding= "1" cellspacing= "0" width= "350px" border= "1" >
<tr>
<td><label> name:</label></td>
<td><input type= "text" name= "Usrname" maxlength= "/></td>"
</tr>
<tr>
<td><label> Sex:</label></td>
<td><input type= "Radio" name= "Sex" value= "0"/> male <input type= "Radio" name= "Sex" value= "0"/> Female </td >
</tr>
<tr>
<td><label> Mail:</label></td>
<td><input type= "text" name= "email" maxlength= "/></td>"
</tr>
<tr>
<td><lable> Image </label></td>
<td>
<table cellpadding= "0" cellspacing= "0" class= "imgtable" >
<tr>
<td>Onreadystatechange= "Javascript:sizecheck (this);" />
</td>
</tr>
<tr>
<td><input type= "File" Name= "uploadimg" onchange= "Javascript:checkfilechange (this);"
Size= "/></td>"
</tr>
</table>
</td>
</tr>
<tr>
<TD colspan= "2" ><a href= "Javascript:commit ();" href= "javascript:commit ();" > Registration </a></td>
</tr>
</table>
</form>
</body>
