Ajax實現(xiàn)圖片上傳并預(yù)覽功能
更新時間：2018年06月27日 10:48:35 作者：An丶
這篇文章主要介紹了Ajax實現(xiàn)圖片上傳并預(yù)覽,需要的朋友可以參考下
先給大家展示下效果圖，大家感覺不錯，請參考實現(xiàn)代碼。
最近在使用ThinkPHP5開發(fā)項目中客戶有一個需求是在圖片上傳時附帶預(yù)覽功能。雖然現(xiàn)在有很多的插件能實現(xiàn)，但是還是覺得自己寫比較好。我們知道，圖片上傳需要一個input:file表單
<input type='file' name='pic'>
當(dāng)我們點擊表單的時候提示選擇需要上傳的圖片。但是此需求我們分析一下，可以在點擊圖片的時候使用JS實現(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;
}
效果如下:
但是這樣的話會涉及很多兼容問題。所以就想到了Ajax，在圖片上傳時，使用Ajax技術(shù)。將圖片上傳到服務(wù)器，再由服務(wù)器返回給我們圖片的上傳地址，然后添加到img標(biāo)簽中去。過程雖然麻煩了點，但是親測不會有兼容問題。
需要發(fā)送Ajax請求的話，當(dāng)然input:file表單是不能實現(xiàn)我們的需求的，因此，我們需要給表單關(guān)聯(lián)一個單擊事件去幫我們進行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>
當(dāng)我們點擊上傳圖片這個button按鈕時觸發(fā)input:file選擇圖片實現(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('文件類型錯誤,請上傳圖片類型');
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對面進行表單提交，然后服務(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);
}
這里會返回圖片上傳的url路徑：$response['f] = $imgpath;現(xiàn)在我們要做的就是將這個url寫進前臺HTML部分進行一個顯示
<div class="form-group"> <!-- 將Ajax上傳的圖片路徑添加到數(shù)據(jù)庫 --> <div id="show"></div> </div>
在JS中添加
$('#show').html(result1);
總結(jié)
以上所述是小編給大家介紹的Ajax實現(xiàn)圖片上傳并預(yù)覽功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
Ajax 由 HTML、JavaScript™ 技術(shù)、DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。對于Ajax，最核心的一個對象是XMLHttpRequest，所有的ajax操作都離不開對這個對象的操作。2008-12-12
用 ajax 的方法解決網(wǎng)頁廣告顯示的問題...2006-12-12
AJAX = 異步 JavaScript 和 XML，AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。本文給大家?guī)砹巳娼馕鯝jax綜合應(yīng)用大全，非常不錯具有參考借鑒價值，感興趣的朋友一起看下吧2016-06-06
ajax回調(diào)函數(shù)中使用$(this)取不到對象的解決方法
如果在ajax的回調(diào)函數(shù)內(nèi)使用$(this)的話，實踐證明，是取不到任何對象的,需要的朋友可以參考下2014-06-06
Ajax 和 Asp 的編程...2006-10-10
實現(xiàn)了類似google的搜索提示效果。2009-03-03
這篇文章主要為大家詳細(xì)介紹了Ajax和跨域問題，告訴大家什么Ajax，什么是跨域？具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
下面小編就為大家?guī)硪黄獪\談ajax請求技術(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了ajax跳轉(zhuǎn)到新的jsp頁面的方法，在不刷新整個頁面的情況下更新頁面的局部信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細(xì)介紹了Ajax實現(xiàn)二級聯(lián)動菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11