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

时间:2018-02-12 19:59:43

标签: javascript php jquery mysql ajax

我遇到了在我的数据库中上传带有名字的图片的问题我的代码工作正常,但它只适用于图片我无法在其中添加名称和其他数据

  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"]);

1 个答案:

答案 0 :(得分: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){
        // ...
    }
});

服务器端将在您的"movieprice"数组中收到数据"movietitle""moviecategory"$_POST