zoukankan      html  css  js  c++  java

  • Javascript 验证上传图片大小[客户端验证]

    需求分析： 
    在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢？有两种方式： 
    1)后台处理： 也就是AJAX POST提交到后台，把图片上传到服务器上，然后获得该图片大小做处理。 
    2)前台处理： 也就是利用Javascript获取该图片大小。 
    显然第一种方式，很不好。因为需要把文件先上传到服务器上，如果文件很大的话，在加上网不是很快，需要等待好长时间，治标不治本。 
    功能解析： 
    在这里我只介绍IE与FireFox两个浏览器的不同做法。 
    IE6： 
    关键字： fileSize onreadystatechange complete 
    在IE6中可以通过Img对象的fileSize 属性获得文件大小，但这个fileSize属性的正确值是建立在onreadystatechange 事件的complete 中，也就是 

    Java代码  收藏代码
    1. <img src="" class="img"   
    2. onreadystatechange="Javascript:sizeCheck(this);">   
    3. function sizeCheck(img) {   
    4.   
    5. if(img.readyState == "complete") {   
    6. alert(img.fileSize);   
    7. }   
    8. }   



    FireFox3.0： 
    关键字： getAsDataURL() fileSize 
    在FireFox中处于安全的考虑，无法获得上传图片的完整路径，只能获得图片名称。但浏览器提供nsIDOMFile這樣一個接口，所以需要通过getAsDataURL()获得处理过后的路径，但该路径不影响图片src显示。 
    nsIDOMFile接口： 
    DOMString getAsBinary(); 
    DOMString getAsDataURL(); 
    DOMString getAsText(in DOMString encoding); 

    Java代码  收藏代码
    1. <input type="file" name="uploadImg"   
    2. onchange="Javascript:checkFileChange(this);"   
    3. size="12"/>   
    4. function checkFileChange(obj) {   
    5. var img = document.getElementById("img");   
    6. img.src = obj.files[0].getAsDataUrl();   
    7. alert(obj.files[0].fileSize);   
    8. }  



    以上是两个不同浏览器的处理方式,那么怎么把他们融和到一起呢？我在下面会将我做的小例子贴出来，其中里面我使用JQuery，方便与获取对象 

    Java代码  收藏代码
      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
      2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">   
      3. <head>   
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
      5. <script type="text/javascript" src="lib/jquery-1.3.2.min.js" ></script>   
      6. <title>检查上传图片大小</title>   
      7. <style type="text/css">   
      8. .img {136px;height:102px;}   
      9. .imgError{border:3px solid red;}   
      10. </style>   
      11. <script type="text/javascript">   
      12. //限制上传图片大小100K   
      13. var MAXSIZE = 100 * 1024;   
      14.   
      15. //图片大小限制信息   
      16. var ERROR_IMGSIZE = "图片大小不能超过100K";   
      17. //默认图片   
      18. var NOPHOTO = "imgs/nophoto.gif";   
      19.   
      20. //图片是否合格   
      21. var isImg = true;   
      22. /**  
      23. * Input file onchange事件  
      24. * @params obj file对象  
      25. * @return void  
      26. **/   
      27. function checkFileChange(obj) {   
      28.   
      29. //初始化设置   
      30. $(".imgTable").removeClass("imgError");   
      31. updateTips("");   
      32. var img = $(".img").get(0);   
      33. var file = obj.value;   
      34. var exp = /..jpg|..gif|..png|..bmp/i;   
      35. if (exp.test(file)) {//验证格式   
      36. if($.browser.msie) {//判断是否是IE   
      37. img.src = file;   
      38. } else {   
      39. img.src = obj.files[0].getAsDataURL();   
      40. sizeCheck(img);   
      41. }   
      42.   
      43. } else {   
      44. img.src = NOPHOTO;   
      45. $(".imgTable").addClass("imgError");   
      46. updateTips("图片格式不正确");   
      47. isImg = false;   
      48. }   
      49.   
      50. }   
      51. /**  
      52. * sizeCheck 检查图片大小  
      53. * @params img 图片对象  
      54. * @return void  
      55. **/   
      56. function sizeCheck(img) {   
      57. //初始化设置   
      58. $(".imgTable").removeClass("imgError");   
      59. updateTips("");   
      60. if ($.browser.msie) {//查看是否是IE   
      61. if(img.readyState == "complete") {   
      62. if (img.fileSize > MAXSIZE) {   
      63. $(".imgTable").addClass("imgError");   
      64. updateTips(ERROR_IMGSIZE);   
      65. isImg = false;   
      66. }else {   
      67. isImg = true;   
      68. }   
      69.   
      70. }else {   
      71. $(".imgTable").addClass("imgError");   
      72. updateTips(ERROR_IMGSIZE);   
      73. isImg = false;   
      74. }   
      75.   
      76. } else {   
      77. var file = $("input:file[name='uploadImg']")[0];   
      78.   
      79. if (file.files[0].fileSize > MAXSIZE) {   
      80. $(".imgTable").addClass("imgError");   
      81. updateTips(ERROR_IMGSIZE);   
      82. isImg = false;   
      83. }else {   
      84. isImg = true;   
      85. }   
      86.   
      87. }   
      88. }   
      89.   
      90. /**  
      91. * updateTips 注册错误信息显示  
      92. * @params str 显示内容  
      93. * @return void  
      94. **/   
      95. function updateTips(str) {   
      96. $("p#errorTips").text(str);   
      97. }   
      98. /**  
      99. * commit 注册提交  
      100. * @return void  
      101. **/   
      102. function commit() {   
      103.   
      104. var isCommit = true;   
      105. var usrname = $("input:text[name='usrname']"),   
      106. email = $("input:text[name='email']"),   
      107. img = $(".img"),   
      108. file = $("input:file[name='uploadImg']"),   
      109. frm = document.frm;   
      110.   
      111. isCommit = isCommit && isImg;   
      112.   
      113. if(isCommit) {   
      114. frm.action = "about:blank";   
      115. frm.submit();   
      116. }   
      117. }   
      118. /**  
      119. * errorImg 图片错误显示  
      120. * @params img 图片对象  
      121. * @return void  
      122. **/   
      123. function errorImg(img) {   
      124. img.src = NOPHOTO;   
      125. }   
      126.   
      127. </script>   
      128. </head>   
      129. <body>   
      130. <form name="frm" method="post">   
      131. <p id="errorTips"> </p>   
      132. <table cellpadding="1" cellspacing="0" width="350px" border="1">   
      133. <tr>   
      134. <td><label>姓名：</label></td>   
      135. <td><input type="text" name="usrname" maxlength="50"/></td>   
      136. </tr>   
      137. <tr>   
      138. <td><label>性别：</label></td>   
      139. <td><input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="0"/>女</td>   
      140. </tr>   
      141. <tr>   
      142. <td><label>邮件：</label></td>   
      143. <td><input type="text" name="email" maxlength="100"/></td>   
      144. </tr>   
      145. <tr>   
      146. <td><lable>图像</label></td>   
      147. <td>   
      148. <table cellpadding="0" cellspacing="0" class="imgTable">   
      149. <tr>   
      150. <td><img src="imgs/nophoto.gif" src="imgs/nophoto.gif" class="img" alt="头像" onerror="Javascript:errorImg(this);"   
      151. onreadystatechange="Javascript:sizeCheck(this);"/>   
      152. </td>   
      153. </tr>   
      154. <tr>   
      155. <td><input type="file" name="uploadImg" onchange="Javascript:checkFileChange(this);"   
      156. size="12"/></td>   
      157. </tr>   
      158. </table>   
      159. </td>   
      160. </tr>   
      161. <tr>   
      162. <td colspan="2"><a href="Javascript:commit();" href="Javascript:commit();">注册</a></td>   
      163. </tr>   
      164. </table>   
      165. </form>   
      166. </body>   
      167. </html>  
  • 相关阅读:
    Mybatis中tinyint(1)数据自动转化为boolean处理
    使用spring-cloud-starter-bus-amqp做微服务配置刷广播,config-client配置 未刷新的 问题
    深入Spring Boot: 怎样排查 java.lang.ArrayStoreException
    springboot activiti 配置项详解
    MySQL_插入更新 ON DUPLICATE KEY UPDATE
    Maven：mirror和repository 区别
    ajax请求二进制流图片并渲染到html中img标签
    不要在工作中做滥竽充数的人
    获取客户端IP地址的三个HTTP请求头的区别
    web服务器获取请求客户端真实地址的方法
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/3835506.html
Copyright © 2011-2022 走看看