jQuery+PHP實(shí)現(xiàn)圖片上傳并提交功能

發(fā)布時(shí)間：2021-02-04 15:19:26 來源：億速云閱讀：214 作者：小新欄目：開發(fā)技術(shù)

這篇文章主要介紹了jQuery+PHP實(shí)現(xiàn)圖片上傳并提交功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

圖片上傳思路：通過ajax實(shí)現(xiàn)圖片上傳，然后把PHP返回的圖片地址，加入到隱藏字段中，最后通過表單提交給后臺(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)效果如下：

jQuery+PHP實(shí)現(xiàn)圖片上傳并提交功能

ps：js代碼是使用jQuery的寫法，需引入jQuery代碼庫文件

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jQuery+PHP實(shí)現(xiàn)圖片上傳并提交功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

jQuery+PHP實(shí)現(xiàn)圖片上傳并提交功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽