如何从ajax传递图像

Question

我想使用 jquery 和 ajax 将图像传递到另一个页面。

当我在 php 处收到 POST 时，我无法获取图像，但我得到了其他元素数据。

$(document).ready(function() {
  var file = '';
  // Handle the click event for the "Upload" button
  $("#upload-button").click(function() {
    $("#image-input").click(); // Simulate click on the hidden file input
  });
  $("#image-input").change(function() {
    file = this.files[0];
  });
  $("#send-prompt").on("click", function() {
    var prompt = $("#text_area").val();
    var formData = new FormData();
    formData.append("image", file);
    formData.append("prompt", prompt);
    $.ajax({
      url: "home/UploadImage",
      type: "POST",
      data: formData,
      success: function(msg) {
        alert(msg)
      },
      cache: false,
      contentType: false,
      processData: false
    });
  });
});

<div class="mx-2 my-2">
  <button class="btn btn-custom btn-lg h-100" id="upload-button"><i class="fas fa-cloud-upload-alt"></i> Upload</button>
</div>
<input type="file" id="image-input" name="image-input" value="" style="display: none;">
<div class="flex-grow-1 mx-sm-5 my-2">
  <textarea name="text_area" id="text_area" class="form-control" style="resize: none;" rows="3"></textarea>
</div>
<div class="me-md-5 ms-0 align-self-center">
  <button class="btn-transparent ps-0" type="submit" id="send-prompt" name="send-prompt"><i class="fas fa-paper-plane"></i></button>
</div>

Answer 1

您的代码正在运行，但是，在

php

页面图像将存储在

$_FILES

而不是

$_POST

中，所有其他数据都在

$_POST

中