日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

使用Ajax怎么上傳圖片并預(yù)覽？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，包括網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)核心團(tuán)隊(duì)10年專注互聯(lián)網(wǎng)開(kāi)發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹(shù)立了良好口碑。

最近在使用ThinkPHP5開(kāi)發(fā)項(xiàng)目中客戶有一個(gè)需求是在圖片上傳時(shí)附帶預(yù)覽功能。雖然現(xiàn)在有很多的插件能實(shí)現(xiàn)，但是還是覺(jué)得自己寫比較好。我們知道，圖片上傳需要一個(gè)input:file表單

當(dāng)我們點(diǎn)擊表單的時(shí)候提示選擇需要上傳的圖片。但是此需求我們分析一下，可以在點(diǎn)擊圖片的時(shí)候使用JS實(shí)現(xiàn)預(yù)覽功能，并且樓主也是這樣做的。代碼如下：

function getFileUrl(sourceId) {  
  var url; 
  url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));  
  return url;  
}  
function preImg(sourceId, targetId) {  
  var url = getFileUrl(sourceId);  
  var imgPre = document.getElementById(targetId);  
  imgPre.src = url;  
}

但是這樣的話會(huì)涉及很多兼容問(wèn)題。所以就想到了Ajax，在圖片上傳時(shí)，使用Ajax技術(shù)。將圖片上傳到服務(wù)器，再由服務(wù)器返回給我們圖片的上傳地址，然后添加到img標(biāo)簽中去。過(guò)程雖然麻煩了點(diǎn)，但是親測(cè)不會(huì)有兼容問(wèn)題。

需要發(fā)送Ajax請(qǐng)求的話，當(dāng)然input:file表單是不能實(shí)現(xiàn)我們的需求的，因此，我們需要給表單關(guān)聯(lián)一個(gè)單擊事件去幫我們進(jìn)行Ajax請(qǐng)求并選擇圖片

 
   頭像 
   
 
    
 
  

public function uppic() 
  { 
    $file = request()->file('f'); 
    $info = $file->move(ROOT_PATH . 'public/uploads/avatar'); 
    $a=$info->getSaveName();  
    $imgp= str_replace("\\","/",$a);  
    $imgpath='uploads/avatar/'.$imgp;  
    $banner_img= $imgpath; 
    $response = array();  
    if($info){  
      $response['isSuccess'] = true;  
      $response['f'] = $imgpath;  
    }else{  
      $response['isSuccess'] = false;  
    }  
        
    echo json_encode($response); 
  }