圖片上傳思路：通過(guò)ajax實(shí)現(xiàn)圖片上傳，然后把PHP返回的圖片地址，加入到隱藏字段中，最后通過(guò)表單提交給后臺(tái)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)
//提交后臺(tái)處理
$.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>
后臺(tái)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;
//移動(dòng)到指定目錄，上傳圖片
$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);
}
最后實(shí)現(xiàn)效果如下：
ps：js代碼是使用jQuery的寫法，需引入jQuery代碼庫(kù)文件
到此這篇關(guān)于jQuery加PHP實(shí)現(xiàn)圖片上傳并提交實(shí)現(xiàn)詳解的文章就介紹到這了,更多相關(guān)jQuery加PHP實(shí)現(xiàn)圖片上傳并提交內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- jQuery+ThinkPHP實(shí)現(xiàn)圖片上傳
- jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能【附php后臺(tái)接收】
- PHP結(jié)合jquery ajax實(shí)現(xiàn)上傳多張圖片，并限制圖片大小操作示例
- jQuery+PHP實(shí)現(xiàn)上傳裁剪圖片
- thinkphp jquery實(shí)現(xiàn)圖片上傳和預(yù)覽效果
- JQuery PHP圖片在線裁剪實(shí)例
- php+flash+jQuery多圖片上傳源碼分享
- PHP+jQuery+Ajax實(shí)現(xiàn)多圖片上傳效果
- jquery+php+ajax顯示上傳進(jìn)度的多圖片上傳并生成縮略圖代碼
- PHP結(jié)合JQueryJcrop實(shí)現(xiàn)圖片裁切實(shí)例詳解
