圖片上傳思路：通過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實現圖片上傳并提交內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- jQuery+ThinkPHP實現圖片上傳
- jquery+ajax實現上傳圖片并顯示上傳進度功能【附php后臺接收】
- PHP結合jquery ajax實現上傳多張圖片，并限制圖片大小操作示例
- jQuery+PHP實現上傳裁剪圖片
- thinkphp jquery實現圖片上傳和預覽效果
- JQuery PHP圖片在線裁剪實例
- php+flash+jQuery多圖片上傳源碼分享
- PHP+jQuery+Ajax實現多圖片上傳效果
- jquery+php+ajax顯示上傳進度的多圖片上傳并生成縮略圖代碼
- PHP結合JQueryJcrop實現圖片裁切實例詳解
