JS驗(yàn)證圖片格式和大小并預(yù)覽的簡(jiǎn)單實(shí)例

更新時(shí)間：2016年10月11日 12:42:48 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JS驗(yàn)證圖片格式和大小并預(yù)覽的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

實(shí)例如下：

function photoCheck(obj){
    var ff = $("#photoSrc").val();
    if(ff == null || ff == ""){
      return;
    }
    photo_flag = true;
    var fSize = 50.9 * 1024;
    var fileType;
    var fileSize;
    var filePath;
    if (obj.files) { // webkit, mozilla... (jq:$.support.boxModel)  // ff & chrome
      var reader = new FileReader();
      var thisFile = obj.files[0];
      var isFirefox=navigator.userAgent.indexOf("Firefox");  //ff 下獲取圖片大小
      fileType = thisFile.type;
      fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize; 
      reader.readAsDataURL(thisFile);
      
      reader.onloadend = function(event) {
        var imgObj = new Image();
        imgObj.src = event.target.result; // image src
        imgObj.onload = function(event) {
          filePath = this.src;
          if(photo_flag){
            $("#imgShow").attr("src", filePath);
          } else {
            $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");
          }
        }
      } 
    } else {  /////////////////////////////////////////////  ie
      obj.select();
      var path = document.selection.createRange().text;
      var img = new Image(); 
      img.src = path; 
      
      var fileType = path.substring(path.length-4,path.length); 
      if(img.readyState == "complete") {
        fileSize = img.fileSize;
      } else {
        img.onreadystatechange=function(){
           if(img.readyState=='complete'){//當(dāng)圖片load完畢
             fileSize = img.fileSize;
             if(fileSize > fSize){
               setMsg('photoSrc_msg', '圖片太大了！', 'reg_wrong');
              photo_flag = false;
              $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");
              return;
            }
          }
         }
      }
      if (path) {
        filePath = path;
      }
    }
    
    if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){//image/jpeg
      setMsg('photoSrc_msg', '圖片格式錯(cuò)誤！', 'reg_wrong');
      photo_flag = false;
      $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");
      return;
    }
    if(fileSize > fSize){
      setMsg('photoSrc_msg', '圖片太大了！', 'reg_wrong');
      photo_flag = false;
      $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");
      return;
    }
    setMsg('photoSrc_msg', '正確', 'reg_ok');
    if(photo_flag){
      $("#imgShow").attr("src", filePath);
    } else {
      $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg");
    }
  }

用于上傳圖片的驗(yàn)證

下面講解上面的代碼：

下面是一個(gè)用戶上傳頭像的格式和大小的驗(yàn)證的方法，在用戶注冊(cè)的時(shí)候要求用戶上傳頭像的時(shí)候進(jìn)行的驗(yàn)證。在方法中我給予了最詳細(xì)的注釋

<script type="text/javascript">
function photoCheck(obj){
　　　var ff = $("#photoSrc").val();
　　　//獲取文件的路徑
  if(ff == null || ff == ""){
    return;
  }
  photo_flag = true;
  var fSize = 50.9 * 1024;//設(shè)置圖像的大小為50kb，這里你可以自己設(shè)置
  var fileType;
  var fileSize;
  var filePath;
　　　if (obj.files) { 
　　　// obj.files 是chrome，firefox等瀏覽器的對(duì)戲那個(gè)，如果是ie的話他的值就是false
    var reader = new FileReader();
//這個(gè)FileReader在稍后會(huì)進(jìn)行較詳細(xì)的描述，要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 實(shí)現(xiàn)了 FileReader 接口。
    var thisFile = obj.files[0];//獲取文件的對(duì)像
    var isFirefox=navigator.userAgent.indexOf("Firefox"); 
　　//注意這個(gè)是判斷當(dāng)前用戶使用的瀏覽器是哪一種，如果返回的值是大于0的話,那么表示瀏覽器是當(dāng)前瀏覽器，例如isFirefox>0上訴的就是firefox
  
    fileType = thisFile.type;
//獲取文件的類型，一般來(lái)說(shuō)，如果類型是image/jpeg,.jpg,.gif等等圖片格式的話就是合理的
    fileSize=thisFile.size;//獲取當(dāng)前上傳的文件的大小
    fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize; 
//如果是firefox,調(diào)用
    reader.readAsDataURL(thisFile);
    // readAsDataURL：該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實(shí)質(zhì)就是 Data URI，Data URI是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件
    reader.onloadend = function(event) {
　　//文件讀取成功完成時(shí)觸發(fā)
      
      var imgObj = new Image();
      imgObj.src = event.target.result; // 圖像的路徑      
　　 imgObj.onload = function(event) {
   // 圖片加載完畢后
        filePath = this.src;
        
        if(photo_flag){
          $("#imgShow").attr("src", filePath);
//設(shè)置圖片為當(dāng)前上傳的圖片路徑
        } else {
          $("#imgShow").attr("src", "default.jpg");
//否則設(shè)置默認(rèn)的圖片
        }
      }
    } 
　　　} else { //如果是ie
　　　   obj.select();
    var path = document.selection.createRange().text;
//ie下返回上傳時(shí)選定的文件路徑

    var img = new Image(); 
    img.src = path; 
    
    var fileType = path.substring(path.length-4,path.length); 
    if(img.readyState == "complete") {
//圖片加載完畢,獲取圖片的大小
      fileSize = img.fileSize;
    } else {
      img.onreadystatechange=function(){
         if(img.readyState=='complete'){
//當(dāng)圖片load完畢
           fileSize = img.fileSize;
           if(fileSize > fSize){
               photo_flag = false;
            $("#imgShow").attr("src", "default.jpg");
            return;
          }
        }
       }
    }
    if (path) {
      filePath = path;
    }
  }
  //圖片格式的判斷
　　　if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){ 
　　　    photo_flag = false;
    $("#imgShow").attr("src", "default.jpg");
    return;
  }
  if(fileSize > fSize){
    alert("圖片太大了！");
    photo_flag = false;
    $("#imgShow").attr("src", "default.jpg");
    return;
  }
  if(photo_flag){
    $("#imgShow").attr("src", filePath);
  } else {
    $("#imgShow").attr("src", "default.jpg");
  }
}
</script>
</head>
<body>
<input type="file" name="usertx" id="photoSrc" value="文件上傳" onchange="photoCheck(this)"/>
<div>
//顯示圖片的div
<img src="" id="imgShow" style="width:100px;height:100px"></img>
</div>
</body>
</html>

如果是在chrome下上傳的頭像的話，我們查看的起src路徑會(huì)發(fā)現(xiàn)

發(fā)現(xiàn)該方法將文件讀取為一段以 data: 開頭的字符串，像上面描述的一樣，正是FileReader中readAsDataURL的作用，下面介紹下FileReader

方法名參數(shù)描述

abort

none

中斷讀取
readAsBinaryString

file

將文件讀取為二進(jìn)制碼

readAsDataURL

file

將文件讀取為 DataURL

readAsText

file, [encoding]

將文件讀取為文本

readAsText：該方法有兩個(gè)參數(shù)，其中第二個(gè)參數(shù)是文本的編碼方式，默認(rèn)值為 UTF-8。這個(gè)方法非常容易理解，將文件以文本方式讀取，讀取的結(jié)果即是這個(gè)文本文件中的內(nèi)容。readAsBinaryString：它將文件讀取為二進(jìn)制字符串，通常我們將它傳送到后端，后端可以通過(guò)這段字符串存儲(chǔ)文件。readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實(shí)質(zhì)就是 Data URI，Data URI是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件

FileReader還有以下的事件

事件描述

onabort
中斷時(shí)觸發(fā)

onerror
出錯(cuò)時(shí)觸發(fā)

onload
文件讀取成功完成時(shí)觸發(fā)

onloadend
讀取完成觸發(fā)，無(wú)論成功或失敗

onloadstart
讀取開始時(shí)觸發(fā)

onprogress
讀取中

文件一旦開始讀取，無(wú)論成功或失敗，實(shí)例的 result 屬性都會(huì)被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結(jié)果，絕大多數(shù)的程序都會(huì)在成功讀取文件的時(shí)候，抓取這個(gè)值。

以上就是小編為大家?guī)?lái)的JS驗(yàn)證圖片格式和大小并預(yù)覽的簡(jiǎn)單實(shí)例全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: