将图像与ajax中的其他数据一起发送到php

Question

我需要一点帮助。我创建了 ajax 表单并将数据传递给 api.php。我向 php.ini 发送正常值没有问题。我目前在通过发送文件时遇到问题。

HTML

<form id="adding" enctype="multipart/form-data">

 <input type="file" id="imgInp">

 <input type="text" id="name">

 <button type="submit" class="btn btn-default pull-right">Submit</button>
</form>

Javascript

$('#adding').submit(function(e) {
    e.preventDefault();
    $.ajax({
       type: "POST",
       url: 'api.php?do=add',
       data: {
            img: $("#imgInp").val(),
            name: $("#name").val()
        },
       success: function(data)
       {
          if (data === 'KO'){
            document.getElementById("error").innerHTML = "Alert";           
          }
           if (data === 'OK'){
            document.getElementById("error").innerHTML = "OK";          
          }
       }
   });

可以发送来自变量名的数据，但不能来自 img。请帮忙。谢谢

Answer 1

听起来你需要使用表单数据对象。在 data 属性中，通过您的 ajax 调用，

仅供参考：您需要有 jquery 库才能使其正常工作

这将抓取所有表单内容，然后您可以接收表单内容，包括您的 php 控制器上的图像

    $('#adding').submit(function(e) {
 var formData = new FormData($(this));
        e.preventDefault();
        $.ajax({
           type: "POST",
           url: 'api.php?do=add',
           data: formData ,
          contentType: false,
          processData: false,
            cache: false,
           success: function(data)
           {
              if (data === 'KO'){
                document.getElementById("error").innerHTML = "Alert";           
              }
               if (data === 'OK'){
                document.getElementById("error").innerHTML = "OK";          
              }
           }
       });

在你的 php 方面，

<?php
try{
if(isset($_FILES) && $_FILES['tmp_name'] != null){
//awesome, we have something here
//then check for extensions, validate and move upload 
}else{
  //no file
}

}catch(Exception $ex){
  echo($ex->getMessage());
}
?>