使用Ajax怎么上傳圖片并預(yù)覽-創(chuàng)新互聯(lián)

使用Ajax怎么上傳圖片并預(yù)覽？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(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)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。

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

<input type='file' name='pic'>

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

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

<form id="form1"> 
   <label for="exampleInputEmail1">頭像</label> 
   <input type="button" value="上傳圖片" onclick="f.click()" class="btn_mouseout"/><br> 
    <p><input type="file" id="f" name="f" onchange="sc(this);" /></p> 
 </form> 
<div id="result"></div>

當(dāng)我們點(diǎn)擊上傳圖片這個(gè)button按鈕時(shí)觸發(fā)input:file選擇圖片實(shí)現(xiàn)Ajax上傳

<script> 
function sc(){ 
  var animateimg = $("#f").val(); //獲取上傳的圖片名 帶// 
  var imgarr=animateimg.split('\\'); //分割 
  var myimg=imgarr[imgarr.length-1]; //去掉 // 獲取圖片名 
  var houzui = myimg.lastIndexOf('.'); //獲取 . 出現(xiàn)的位置 
  var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 獲取文件后綴 
  var file = $('#f').get(0).files[0]; //獲取上傳的文件 
  var fileSize = file.size;      //獲取上傳的文件大小 
  var maxSize = 1048576;       //較大1MB 
  if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){ 
    parent.layer.msg('文件類型錯(cuò)誤,請(qǐng)上傳圖片類型'); 
    return false; 
  }else if(parseInt(fileSize) >= parseInt(maxSize)){ 
    parent.layer.msg('上傳的文件不能超過1MB'); 
    return false; 
  }else{  
    var data = new FormData($('#form1')[0]);  
    $.ajax({  
      url: "{:url('User/uppic')}",  
      type: 'POST',  
      data: data,  
      dataType: 'JSON',  
      cache: false,  
      processData: false,  
      contentType: false  
    }).done(function(ret){  
      if(ret['isSuccess']){ 
        var result = ''; 
        var result1 = ''; 
        // $("#show").attr('value',+ ret['f'] +); 
        result += '<img src="' + '__ROAD__' + ret['f'] + '" width="100">'; 
        result1 += '<input value="' + ret['f'] + '" name="user_headimg" >'; 
        $('#result').html(result); 
        $('#show').html(result1); 
        layer.msg('上傳成功'); 
      }else{  
        layer.msg('上傳失敗'); 
      }  
    });  
    return false; 
    }  
  } 
</script>

這里我們采用FormData對(duì)面進(jìn)行表單提交，然后服務(wù)器端接收

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

這里會(huì)返回圖片上傳的url路徑：$response['f] = $imgpath;現(xiàn)在我們要做的就是將這個(gè)url寫進(jìn)前臺(tái)HTML部分進(jìn)行一個(gè)顯示

<div class="form-group"> 
  <!-- 將Ajax上傳的圖片路徑添加到數(shù)據(jù)庫 --> 
  <div id="show"></div> 
</div>

在JS中添加

$('#show').html(result1);

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

網(wǎng)頁標(biāo)題：使用Ajax怎么上傳圖片并預(yù)覽-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article30/djespo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站制作、虛擬主機(jī)

廣告

聲明：本網(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)

外貿(mào)網(wǎng)站建設(shè)