這篇文章主要介紹了如使用JavaScript實(shí)現(xiàn)無刷新上傳預(yù)覽圖片功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、祥云網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、祥云網(wǎng)絡(luò)營(yíng)銷、祥云企業(yè)策劃、祥云品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供祥云建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.chinadenli.net

無刷新上傳功能如何實(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 ;
    }
  }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如使用JavaScript實(shí)現(xiàn)無刷新上傳預(yù)覽圖片功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

文章標(biāo)題：如使用JavaScript實(shí)現(xiàn)無刷新上傳預(yù)覽圖片功能
網(wǎng)站網(wǎng)址：http://www.chinadenli.net/article6/ipheog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、微信公眾號(hào)、外貿(mào)網(wǎng)站建設(shè)、域名注冊(cè)、Google、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)