JavaScript實現(xiàn)無刷新上傳預覽圖片功能

更新時間：2017年08月02日 09:58:22 投稿：lijiao

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)無刷新上傳預覽圖片功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

無刷新上傳功能如何實現(xiàn)？手寫無刷新上傳要用到兩個東西，F(xiàn)ormData和FileReader。

FileReader 用于圖片瀏覽。

FormData 用于ajax請求。

html代碼

先創(chuàng)建表單跟圖片的容器

  <form enctype="multipart/form-data" id="oForm">
    <input type="file" name="file" id="file" onchange="readAsDataURL()" />
    <input type="button" value="提交" onclick="doUpload()" />
  </form>
  <div>
    <img alt="" id="img"/>
  </div>

javascript代碼

FormData:

通過FormData對象可以組裝一組用 XMLHttpRequest發(fā)送請求的鍵/值對。它可以更靈活方便的發(fā)送表單數(shù)據(jù)，因為可以獨立于表單使用。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸的數(shù)據(jù)格式和表單通過submit() 方法傳輸?shù)臄?shù)據(jù)格式相同。

在這里FormData對象是用來獲取form表單內(nèi)的所有input數(shù)據(jù)，然后使用ajax請求發(fā)送數(shù)據(jù)到指定url，就不會出現(xiàn)表單提交時跳轉(zhuǎn)的情況。

  function doUpload() { 
     var formData = new FormData($( "#oForm" )[0]); 
     console.log(formData); 
     $.ajax({ 
       url: 'pp', 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (returndata) { 
         console.log(returndata); 
       }, 
       error: function (returndata) { 
         console.log(returndata); 
       } 
     }); 
  }

FileReader:

FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。

在這里FileReader對象是用來獲取file上來的圖片并把圖片轉(zhuǎn)換成Data URL形式顯示在事先創(chuàng)建的容器中。

function readAsDataURL(){
  //檢驗是否為圖像文件
    var file = document.getElementById("file").files[0];
    if(!/image\/\w+/.test(file.type)){
      alert("看清楚，這個需要圖片！");

      return false;
    }else{
    var reader = new FileReader();
    //將文件以Data URL形式讀入頁面
    reader.readAsDataURL(file);
    reader.onload=function(e){
      var result=document.getElementById("img");
      //顯示文件
      result.src= this.result ;
    }
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: