使用 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() 方法并将 image 和 messagetext 发送到 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

你能试试这个吗？您无需担心文本区域中的文件和消息。确保您已添加 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;
});

使用 jQuery 和 AJAX 将表单的文件和文本数据上传到 PHP

upload a form's file and text data to PHP using jQuery and AJAX

javascript

php

ajax

jquery