Home > Developer > JavaScript
If (IMG. readystate = "complete "){
Alert (IMG. filesize );
}
}
Firefox3.0:
Keyword: getasdataurl () filesize
It is safe in Firefox. You cannot obtain the complete path of the uploaded image. You can only obtain the image name. However, the browser provides the nsidomfile interface, so you need to get the processed path through getasdataurl (), but this path does not affect the image SRC display.
Nsidomfile interface:
Domstring getasbinary ();
Domstring getasdataurl ();
Domstring getastext (in domstring encoding );Copy codeThe Code is as follows: <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 );
}
These are the processing methods of two different browsers. How can we combine them? I will post a small example below, in which I will use jquery to facilitate and obtain objects.Copy codeThe Code is as follows: <! 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">
<Head>
<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 the size of the uploaded image </title>
<Style type = "text/CSS">
. IMG {width: 136px; Height: 102px ;}
. Imgerror {border: 3px solid red ;}
</Style>
<SCRIPT type = "text/JavaScript">
// Limit the size of the uploaded image to 100 KB
VaR maxsize = 100*1024;
// Image size limit information
VaR error_imgsize = "the image size cannot exceed 100 kb ";
// Default image
VaR nophoto = "IMGs/nophoto.gif ";
// Whether the image 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) {// verify the format
If ($. browser. MSIE) {// determines if it is IE
IMG. src = file;
} Else {
IMG. src = obj. Files [0]. getasdataurl ();
Sizecheck (IMG );
}
} Else {
IMG. src = nophoto;
$ (". Imgtable"). addclass ("imgerror ");
Updatetips ("incorrect image format ");
Isimg = false;
}
}
/**
* Sizecheck check the image size
* @ Params IMG image object
* @ Return void
**/
Function sizecheck (IMG ){
// Initialization settings
$ (". Imgtable"). removeclass ("imgerror ");
Updatetips ("");
If ($. browser. MSIE) {// check whether it is 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 submission
* @ 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 image error display
* @ Params IMG image object
* @ Return void
**/
Function errorimg (IMG ){
IMG. src = nophoto;
}
</SCRIPT>
</Head>
<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 = "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> 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 = "12"/> </TD>
</Tr>
</Table>
</TD>
</Tr>
<Tr>
<TD colspan = "2"> <a href = "javascript: Commit ();" href = "javascript: Commit ();"> Registration </a> </TD>
</Tr>
</Table>
</Form>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
