首頁  >  文章  >  web前端  >  JavaScript實作不刷新完成圖片的上傳和預覽

JavaScript實作不刷新完成圖片的上傳和預覽

巴扎黑
巴扎黑原創
2017-08-14 13:46:381287瀏覽

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

#無刷新上傳功能如何實現?手寫無刷新上傳要用到兩個東西,FormData和FileReader。

FileReader 用於圖片瀏覽。

FormData 用於ajax請求。

html程式碼

先建立表單跟圖片的容器


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

javascript程式碼

FormData:

透過FormData物件可以組裝一組以XMLHttpRequest傳送請求的鍵/值對。它可以更靈活方便的發送表單數據, 因為可以獨立於表單使用。如果你把表單的編碼類型設定為multipart/form-data ,則透過FormData傳輸 的資料格式和表單透過submit() 方法傳輸的資料格式相同。

在這裡FormData物件是用來取得form表單內的所有input數據,然後使用ajax請求發送資料到指定url,就不會出現表單提交時跳轉的情況。


  function doUpload() { 
     var formData = new FormData($( "#oForm" )[0]); 
     console.log(formData); 
     $.ajax({ 
       url: &#39;pp&#39;, 
       type: &#39;POST&#39;, 
       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應用程式非同步讀取儲存在使用者電腦上的檔案(或原始資料緩衝區)的內容, 使用File 或Blob 物件指定要讀取的檔案或資料。

在這裡FileReader物件是用來取得file上來的圖片並將圖片轉換成Data URL形式顯示在事先建立的 容器中。


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 ;
    }
  }
}

以上是JavaScript實作不刷新完成圖片的上傳和預覽的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn