快捷導(dǎo)航

使用jQuery實現(xiàn)驗證上傳圖片的格式與大小

更新時間：2014年12月03日 09:04:53 投稿：hebedich

在項目中，我們經(jīng)常要遇到上傳圖片，這就需要我們必須要驗證圖片的格式與大小，那么如何來操作呢，今天就給大家分享一個非常簡單的jQuery驗證上傳圖片的格式與大小的代碼。

代碼很簡單，常見的圖片格式均已加入驗證之中，小伙伴們可以直接拿去用的。

廢話少說，直接上代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "   <html xmlns="   <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  $("#form01").change( function(){
  var filepath=$("input[name='myFile']").val();
  var extStart=filepath.lastIndexOf(".");
  var ext=filepath.substring(extStart,filepath.length).toUpperCase();
  if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
  alert("圖片限于bmp,png,gif,jpeg,jpg格式");
  return false;
  }else{$("#name01").text(ext)}
  var file_size = 0;
  if ( $.browser.msie) {
  var img=new Image();
  img.src=filepath;
  while(true){
  if(img.fileSize > 0){
  if(img.fileSize>3*1024*1024){
  alert("圖片不大于100MB。");
  }else{
  var num03 = img.fileSize/1024;
  num04 = num03.toFixed(2)
  $(".size02").text(num04+"KB");
  }
  break;
  }
  }
  } else {
  file_size = this.files[0].size;
  console.log(file_size/1024/1024 + " MB");
  var size = file_size / 1024;
  if(size > 10240){
  alert("上傳的文件大小不能超過10M！");
  }else{
  var num01 = file_size/1024;
  num02 = num01.toFixed(2)
  $("#size01").text(num02 + " KB");
  }
  }
  return true;
  });
  });
  </script>
  <title>無標(biāo)題文檔</title>
  </head>
  <body>
  <table width="500" cellspacing="0" cellpadding="0">
  <tr>
  <td width="72" id="name01"> </td>
  <td width="242"><input type="file" name="myFile" id="form01" /></td>
  <td width="184" id="size01" class="size02"> </td>
  </tr>
  </table>
  </body>
  </html>

以上代碼超級簡單，小伙伴們使用的時候自己記得美化下，這里就不多做解釋了。

您可能感興趣的文章:

相關(guān)文章

TextArea不支持maxlength的解決辦法(jquery)
自己寫了一個jquery的擴展，這樣就可以很容易實現(xiàn)對textarea控制最大長度了。
2011-09-09
jQuery插件slick實現(xiàn)響應(yīng)式移動端幻燈片圖片切換特效
jQuery插件slick是一款響應(yīng)式、適用于移動設(shè)備觸摸屏、可滑動顯示的jQuery幻燈片插件。該幻燈片插件可以設(shè)置多種顯示效果，可以自動播放，是一款移動優(yōu)先的jQuery幻燈片插件。
2015-04-04
JQuery實現(xiàn)鼠標(biāo)移動圖片顯示描述層的方法
這篇文章主要介紹了JQuery實現(xiàn)鼠標(biāo)移動圖片顯示描述層的方法,涉及jQuery鼠標(biāo)事件及動畫效果的使用技巧,需要的朋友可以參考下
2015-06-06
jQuery中prependTo()方法用法實例
這篇文章主要介紹了jQuery中prependTo()方法用法,實例分析了prependTo()方法的功能、定義及匹配的元素插入指定元素之前的使用技巧,需要的朋友可以參考下
2015-01-01
基于JavaScript如何實現(xiàn)ajax調(diào)用后臺定義的方法
由于ajax的獨特優(yōu)勢，使得它在當(dāng)前大量網(wǎng)站得到了廣泛的應(yīng)用，下面就介紹一下ajax如何調(diào)用后臺定義的函數(shù)，對ajax調(diào)用后臺方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
jquery+ajax驗證不通過也提交表單問題處理
這篇文章主要介紹了jquery validationEngine中使用ajax驗證不通過也提交表單問題處理,需要的朋友可以參考下
2014-12-12
jQuery+css實現(xiàn)炫目的動態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實現(xiàn)的動態(tài)塊漂移效果,涉及jQuery基于隨機數(shù)與時間函數(shù)動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
jQuery表格插件datatables用法詳解
這篇文章主要介紹了jQuery表格插件datatables用法，包括分頁、排序等功能,是jQuery表格插件datatables比較基礎(chǔ)的部分知識,需要的朋友可以參考下
2016-01-01
jQuery ui 1.7更新小結(jié)
因為要給新員工進行培訓(xùn)jQuery.UI方面的內(nèi)容，我之前學(xué)習(xí)的都是jquery.ui-1.6b的，現(xiàn)在的版本升級到j(luò)query-ui-1.7.1，除了樣式上有很大調(diào)整以外，API也有了很大的變化。
2009-08-08
JQuery通過后臺獲取數(shù)據(jù)遍歷到前臺的方法
今天小編就為大家分享一篇JQuery通過后臺獲取數(shù)據(jù)遍歷到前臺的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08