javascript - 如何使用图像和字符串将数据传递给ajax

Question

我在上传数据库中包含名称的图像时遇到问题，我的代码工作正常，但它仅适用于图像，我无法在其中添加名称和其他数据

  var formdata = new FormData(this);

  formdata.append("movieprice", movieprice);
  formdata.append("movietitle", movietitle);
  formdata.append("moviecategory", moviecategory);
  formdata.append("upload", upload);
  formdata.append("image", image);
  var upload ="upload";

 $.ajax({
   url:"uploadmovie.php",
   method:"POST",
   data:formdata,
   contentType:false,
   processData:false,
   success:function(data){

     if (data === "YES"){
       alert(data)
       swal("Successfully Uploaded", "", "success")
       .then((value) => {
          window.location.reload();
       });
     }else{
       alert(data)
       swal("Error", "", "warning")
     }
  }
 });
}

变量也是如此:

var movieprice = $('#movieprice').val();
var movietitle = $('#movietitle').val();
var moviecategory = $('#moviecategory').val();

如何将此值传递给ajax？

这里是为那些寻找我没有为空字段添加 JavaScript 验证的人的 html

        <form method="POST" enctype="multipart/form-data" >
     <div class="w3-col m12 02">
        <div class="w3-rest w3-container w3-blue" style="width:100%;">
          <label id="label"><i class="fa fa-tag" style="font-size:24px;"> Movie Category</i></label>
        </div>
           <select id="moviecategory" name="moviecategory">
             <option>Romance</option>
             <option>Comedy</option>
             <option>Action</option>
             <option>Drama</option>
             <option>Horror</option>
             <option>Sci-Fi</option>
         </select>
     </div>

     <div class="w3-col m12 02">
        <div class="w3-rest w3-container w3-blue" style="width:100%;">
          <label id="label"><i class="fa fa-address-card" style="font-size:24px;"> Movie Title</i></label>
        </div>
        <input type="text" name="movietitle" id="movietitle">
     </div>

     <div class="w3-col m12 02">
        <div class="w3-rest w3-container w3-blue" style="width:100%;">
          <label id="label"><i class="fa fa-money" style="font-size:24px;"> Movie Price</i></label>
        </div>
        <input type="number" name="movieprice" id="movieprice">
     </div>

     <div class="w3-col m12 02">
        <div class="w3-rest w3-container w3-blue" style="width:100%;">
          <label id="label"><i class="fa fa-file" style="font-size:24px;">Movie Image</i></label>
        </div>
        <input type="file" name="image" id="image" /><br />
     </div>

     <footer class="w3-container">
       <button class="w3-right btn btn-danger" id="close" style="float: right; width:90px; margin-left:10px;">close</button>
       <button type="submit" class="btn btn-primary" name="upload" id="upload" value="Upload Image" style="float: right; width:90px;">Add</button>
     </footer>
  </form>

对于 uploadmovie.php 我收到图像未定义的错误使用此 $image = $_FILES["image"]["tmp_name"];

if (move_uploaded_file($_FILES["image"]["tmp_name"], $target)) {
$target = "images/".basename($_FILES["image"]["tmp_name"]);

Answer 1

您可以将自定义数据添加到FormData中使用方法 append() 的实例:

var movieprice = $('#movieprice').val();
var movietitle = $('#movietitle').val();
var moviecategory = $('#moviecategory').val();

// create FormData object
var formdata = new FormData(this);

// add custom data :
formdata.append("movieprice", movieprice);
formdata.append("movietitle", movietitle);
formdata.append("moviecategory", moviecategory);

// send data
$.ajax({
    url:"uploadmovie.php",
    method:"POST",
    data:formdata,
    contentType:false,
    processData:false,
    success:function(data){
        // ...
    }
});

服务器端将在您的$_POST中接收数据“movieprice”、“movietitle”和“moviecategory” 数组。