Requirements Analysis:
When uploading pictures, if the uploaded picture size is not limited, the consequences will be very serious. So how can we solve a difficult problem? There are two ways:
1) Backend processing: That is, AJAX POST is submitted to the background, upload the image to the server, and then obtain the image size for processing.
2) Front desk processing: That is, use Javascript to obtain the image size.
Obviously the first method is not good. Because you need to upload the file to the server first, if the file is large, the network will not be very fast, and you need to wait for a long time to treat the symptoms but not the root cause.
Functional analysis:
Here I will only introduce the different practices of IE and FireFox browsers.
IE6:
Keyword: fileSize onreadystatechange complete
In IE6, the file size can be obtained through the fileSize property of the Img object, but the correct value of this fileSize property is built in the complete of the onreadystatechange event, that is,
<img src="" onreadystatechange="Javascript:sizeCheck(this);"> function sizeCheck(img) { if(img.readyState == "complete") { alert(img.fileSize); } }FireFox 3.0:
Keyword: getAsDataURL() fileSize
In FireFox, it is not possible to get the full path to upload the image, only the image name can be obtained. However, the browser provides an nsIDOMFile interface, so you need to obtain the processed path through getAsDataURL(), but this path does not affect the display of the image src.
nsIDOMFile interface:
DOMString getAsBinary(); DOMString getAsDataURL(); DOMString getAsText(in DOMString encoding); <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); }The above are the processing methods of two different browsers, so how do you integrate them together? I will post the small example I made below, where I use JQuery to facilitate the acquisition of objects
<!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 uploaded image size</title> <style type="text/css"> .img {width:136px;height:102px;} .imgError{border:3px solid red;} </style> <script type="text/javascript"> //Limit uploaded image size 100K var MAXSIZE = 100 * 1024; //Image size limit information var ERROR_IMGSIZE = "Image size cannot exceed 100K"; //Default image var NOPHOTO = "imgs/nophoto.gif"; //Is the image qualified var isImg = true; /** * Input file onchange event* @params obj file object* @return void **/ function checkFileChange(obj) { //Initialize setting $(".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 format if($.browser.msie) {//Judge whether it is IE img.src = file; } else { img.src = obj.files[0].getAsDataURL(); sizeCheck(img); } } else { img.src = NOPHOTO; $(".imgTable").addClass("imgError"); updateTips("Img format is incorrect"); isImg = false; } } /** * sizeCheck Check image size* @params img Image object* @return void **/ function sizeCheck(img) { //Initialize the setting $(".imgTable").removeClass("imgError"); updateTips(""); if ($.browser.msie) {//See if 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 { 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 Register and submit* @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" 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>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="external nofollow" rel="external nofollow" href="Javascript:commit();" rel="external nofollow" rel="external nofollow" >Register</a></td> </tr> </table> </form> </body> </html>