使用 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;
});