Ajax實現圖片上傳并預覽功能

來源：懂視網責編：小采時間：2020-11-27 22:51:30

Ajax實現圖片上傳并預覽功能

Ajax實現圖片上傳并預覽功能:先給大家展示下效果圖，大家感覺不錯，請參考實現代碼。最近在使用ThinkPHP5開發項目中客戶有一個需求是在圖片上傳時附帶預覽功能。雖然現在有很多的插件能實現，但是還是覺得自己寫比較好。我們知道，圖片上傳需要一個input:file表單 <inpu

推薦度：

點擊下載本文 文檔為doc格式

導讀Ajax實現圖片上傳并預覽功能:先給大家展示下效果圖，大家感覺不錯，請參考實現代碼。最近在使用ThinkPHP5開發項目中客戶有一個需求是在圖片上傳時附帶預覽功能。雖然現在有很多的插件能實現，但是還是覺得自己寫比較好。我們知道，圖片上傳需要一個input:file表單 <inpu

先給大家展示下效果圖，大家感覺不錯，請參考實現代碼。

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

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

當我們點擊表單的時候提示選擇需要上傳的圖片。但是此需求我們分析一下，可以在點擊圖片的時候使用JS實現預覽功能，并且樓主也是這樣做的。代碼如下：

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

效果如下:

但是這樣的話會涉及很多兼容問題。所以就想到了Ajax，在圖片上傳時，使用Ajax技術。將圖片上傳到服務器，再由服務器返回給我們圖片的上傳地址，然后添加到img標簽中去。過程雖然麻煩了點，但是親測不會有兼容問題。

需要發送Ajax請求的話，當然input:file表單是不能實現我們的需求的，因此，我們需要給表單關聯一個單擊事件去幫我們進行Ajax請求并選擇圖片

<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);" style="display:none"/></p> 
 </form> 
<div id="result"></div>

當我們點擊上傳圖片這個button按鈕時觸發input:file選擇圖片實現Ajax上傳

<script> 
function sc(){ 
 var animateimg = $("#f").val(); //獲取上傳的圖片名 帶// 
 var imgarr=animateimg.split('\\'); //分割 
 var myimg=imgarr[imgarr.length-1]; //去掉 // 獲取圖片名 
 var houzui = myimg.lastIndexOf('.'); //獲取 . 出現的位置 
 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('文件類型錯誤,請上傳圖片類型'); 
 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" style="display:none;">'; 
 $('#result').html(result); 
 $('#show').html(result1); 
 layer.msg('上傳成功'); 
 }else{ 
 layer.msg('上傳失敗'); 
 } 
 }); 
 return false; 
 } 
 } 
</script>

這里我們采用FormData對面進行表單提交，然后服務器端接收

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

這里會返回圖片上傳的url路徑：$response['f] = $imgpath;現在我們要做的就是將這個url寫進前臺HTML部分進行一個顯示

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

在JS中添加

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

總結

以上所述是小編給大家介紹的Ajax實現圖片上傳并預覽功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Ajax實現圖片上傳并預覽功能

推薦度：

點擊下載本文 文檔為doc格式

標簽：上傳實現效果圖

熱門焦點

Ajax實現圖片上傳并預覽功能

Ajax實現圖片上傳并預覽功能

Ajax實現圖片上傳并預覽功能

最新推薦

猜你喜歡

熱門推薦