jQuery加PHP實現圖片上傳並提交的示例程式碼
阿新 • • 發佈：2020-07-19
圖片上傳思路：通過ajax實現圖片上傳，然後把PHP返回的圖片地址，加入到隱藏欄位中，最後通過表單提交給後臺PHP，程式碼如下
HTML程式碼 zimg.html檔案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>自定義上傳圖片</title>
</head>
<body>
<form action="a.php?action=2" method="post">
<span>
上傳圖片
</span>
<span>
<input type="file" id="img_url" name="img_url" accept=".jpg,.gif,.jpeg,.bmp,.png"/>
<a onclick="UpLoadImg()">上傳</a>
<input type="hidden" id="url_data" name="url_data"/>
</span>
<br>
<span>
<input type="submit" value="提交">
</span>
</form>
</body>
<!-- 引入jq -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function UpLoadImg(){
//獲取上傳檔案
var formData = new FormData();
formData.append('img_url',$('#img_url')[0].files[0]);
console.log(formData)
//提交後臺處理
$.ajax({
url: 'a.php?action=1',type: 'POST',cache: false,data: formData,dataType: "JSON",processData: false,contentType: false
}).done(function(res) {
console.log(res.url);
if(res.status == 1){
//賦值給欄位
$('#url_data').val(res.url);
alert(res.msg)
}else{
alert(res.msg)
}
}).fail(function(res) {
});
}
</script>
</html>後臺PHP程式碼 a.php：
<?php
if($_GET['action'] == 1){//上傳圖片介面
$img = $_FILES['img_url'];
//獲取上圖片字尾
$type = strstr($img['name'],'.');
$rand = rand(1000,9999);
//命名圖片名稱
$pics = date("YmdHis") . $rand . $type;
//上傳路徑
$pic_path = "img/". $pics;
//移動到指定目錄，上傳圖片
$res = move_uploaded_file($img['tmp_name'],$pic_path);
if($res){
echo json_encode(['status' => 1,'msg' => '上傳成功','url' => $pic_path]);exit;
}else{
echo json_encode(['status' => 0,'msg' => '上傳失敗']);exit;
}
}elseif($_GET['action'] == 2){//提交檔案表單
echo '<pre>';
var_dump($_POST);
}最後實現效果如下：
ps：js程式碼是使用jQuery的寫法，需引入jQuery程式碼庫檔案
以上就是jQuery加PHP實現圖片上傳並提交的示例程式碼的詳細內容，更多關於jQuery加PHP實現圖片上傳的資料請關注我們其它相關文章！