通过input上传图片，判断不同浏览器及图片类型和大小的js代码

1.jsp页面代码

1. <form id="userPhoto" name="userPhoto" method="post" action="../uploadUserPhoto" enctype="multipart/form-data">
2. <input type="hidden" id="max_PhotoSize" name="maxPhotoSize" value="${maxPhotoSize}"/>
3. <input type="hidden" id="photoType" name="photoType" value=""/>
4. <input type="file" id="filePhoto"  value=""
5. style="font-size:400px;opacity:0;filter:alpha(opacity:0);-moz-opacity:0;position:absolute;top:0px;left:0px;width:400px;height:400px;z-index:100;overflow：hidden;cursor:pointer;"
6. name="userPhoto"/>
7. <img style="top:0px;left:0px;z-index:99" id="imgUserPhoto" src="" width="100" height="140">
8. <table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0" align="center">
9. <tr>
10. <td width="100%" align="center" valign="middle">
11. <s:hidden id="userId" name="user.userId" />
12. </td>
13. </tr>
14. </table>
15. </form>

2.js代码

1. function uploadImage() {
2. var fileSize = 1024 * 5000;
3. var maxFileSize= $("#max_PhotoSize")[0].value ;
4. var location = $("#filePhoto")[0].value;
5. var point = location.lastIndexOf(".");
6. var type = location.substr(point);
7. $("#photoType").val(type);
8. if (type == ".jpg" || type == ".gif" || type == ".JPG" || type == ".GIF" || type == ".bmp" || type == ".BMP"
9. || type == ".jpeg" || type == ".JPEG" || type == ".PNG" || type == ".png" ) {
10. if ($.browser.msie) {//IE
11. var img = document.createElement("img");
12. img.src = $("#filePhoto")[0].value;
13. fileSize = img.fileSize;
14. }
15. if ($.browser.mozilla || (navigator.userAgent.toLowerCase().match(/chrome/) !=null)) {//火狐或者chrome
16. fileSize = $("#filePhoto")[0].files[0].size;
17. }
18. if (fileSize > maxFileSize*1024) {
19. alert("图片尺寸请不要大于"+maxFileSize+"KB");
20. return false;
21. } else {
22. $("#userPhoto")[0].submit();
23. return true;
24. }
25. } else {
26. alert("只能上传jpg,gif,bmp,jpeg,png格式的图片");
27. return false;
28. }
29. return true;
30. }

3.补充：

以上关于IE的验证，适合于IE6以前的版本，对于IE7以上的版本前台不好判断图片的大小，最好还是通过后台判断：

(1)先将Form提交

(2)在后台判断提交图片文件大小，如果大于最大限制，则不做任何处理，返回提示语，如果在最大限制内，则再进行保存等处理