使用 jQuery 和 AJAX 將表單的文件和文本數據上傳到 PHP

Question

早上好。 我正在嘗試使消息的表單提交更加流暢，避免重新加載頁面以發送它。 由於消息可能是文本或圖像，我需要將它們都發送到 PHP 頁面進行上傳。 我在 html 頁面中使用此代碼：

<form id="newmessage" enctype="multipart/form-data">

<textarea form="newmessage" id="messagetext" name="messagetext" ></textarea>
         
<input type="submit" name="submit" value="send" onclick="return newMessage();">
         
<input type="file" accept="image/*" id="image" name="image">

</form>
      
<script>
function newMessage(){
var messagetext = document.getElementById("messagetext").value;
var image = document.getElementById("image").value;

      $.ajax({
           type:"post",
           url:"new_message.php",
           data: 
           {  
            "messagetext" :messagetext,
            "image" :image,
           },
           cache:false,
           success: function(html) {
               document.getElementById("messagetext").value = "";
                 }
             });
             
             return false;
          }
      </script>

如您所見，我允許用戶輸入文本區域或上傳文件。 當他們提交表單時，調用 newMessage() 方法並將圖像和消息文本發送到new_message.php ，后者會處理它們：

   // new_message.php
   $messagetext = $_POST["messagetext"];
   $image = $_FILES["image"]["tmp_name"]; 
   
   if((!empty($messagetext) || isset($image))) {
   
       if(!empty($messagetext)) {
           // create text message
       } else if(isset($image)) {
           // create image message
       }
   }

當我寫一條短信時，它工作得很好，但如果它是圖像，它就不會發送任何東西。 也許 AJAX 中的圖像變量沒有正確獲取文件。 如果這個問題不清楚，我很抱歉，但我是 StackOverlow 的初學者，我願意編輯。 感謝所有回復。

Answer 1

你能試試這個嗎？ 您無需擔心 textarea 中的文件和消息。 確保您已添加 jQuery。

$("#newmessage").on("submit", function(ev) {
  ev.preventDefault(); // Prevent browser default submit.

  var formData = new FormData(this);
    
  $.ajax({
    url: "new_message.php",
    type: "POST",
    data: formData,
    success: function (msg) {
      document.getElementById("messagetext").value = "";
    },
    cache: false,
    contentType: false,
    processData: false
  });
  return false;
});