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

FileReader 用于圖片瀏覽。

FormData 用于ajax請(qǐng)求。

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對(duì)象可以組裝一組用 XMLHttpRequest發(fā)送請(qǐng)求的鍵/值對(duì)。它可以更靈活方便的發(fā)送表單數(shù)據(jù)， 因?yàn)榭梢元?dú)立于表單使用。如果你把表單的編碼類型設(shè)置為multipart/form-data ，則通過FormData傳輸 的數(shù)據(jù)格式和表單通過submit() 方法傳輸?shù)臄?shù)據(jù)格式相同。

在這里FormData對(duì)象是用來獲取form表單內(nèi)的所有input數(shù)據(jù)，然后使用ajax請(qǐng)求發(fā)送數(shù)據(jù)到指定url，就不會(huì)出現(xiàn)表單提交時(shí)跳轉(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 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容， 使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。

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

function readAsDataURL(){  //檢驗(yàn)是否為圖像文件    var file = document.getElementById("file").files[0];    if(!/image///w+/.test(file.type)){      alert("看清楚，這個(gè)需要圖片！");      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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長站。