使用Ajax怎么上傳圖片并預(yù)覽？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
10年積累的成都網(wǎng)站建設(shè)、做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有南票免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
最近在使用ThinkPHP5開發(fā)項目中客戶有一個需求是在圖片上傳時附帶預(yù)覽功能。雖然現(xiàn)在有很多的插件能實現(xiàn)，但是還是覺得自己寫比較好。我們知道，圖片上傳需要一個input:file表單
當(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ù)。將圖片上傳到
當(dāng)我們點擊上傳圖片這個button按鈕時觸發(fā)input:file選擇圖片實現(xiàn)Ajax上傳
這里我們采用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部分進行一個顯示
