Файл не загружается с помощью Ajax

Question

Я пытаюсь загрузить файл и значение переменной с помощью ajax, но он не отправляется. В настоящее время я использую форму и отправлю, но мне нужно передать это переменное тело - получить ширину тела. Как это сделать с помощью Ajax?

Мой код:

$(document).ready(function (e) { 
    $("#form").on('submit',(function(e) { 
     var file = new FormData($('form')[0]); 
     var body = $('body').width(); 

     e.preventDefault(); 
     $.ajax({ 
      url: "image/upload", 
      type: "POST", 
      data: {body:body, file:file}, 
      contentType: false, 
      cache: false, 
      processData:false, 
      success: function(data){ 

      }   
     }); 
    })); 
}); 

<form id="form"> 
    <label>Upload Image File:</label><br/> 
    <input name="image" type="file" /> 
    <input type="submit" value="Submit" /> 
</form> 

Мой контроллер:

 public function action_create() 
    { 
      $error = 'false'; 
      $bg_path = ''; 
      if(!empty($_FILES["file"])) 
      { 
if ((($_FILES["file"]["type"] == "image/jpeg") 
        || ($_FILES["file"]["type"] == "image/jpg") 
        || ($_FILES["file"]["type"] == "image/pjpeg") 
        || ($_FILES["file"]["type"] == "image/x-png") 
        || ($_FILES["file"]["type"] == "image/png")) 
       && in_array($extension, $allowedExts)) { 
       if ($_FILES["file"]["error"] > 0) 
       { 
        $error = "Error: " . $_FILES["file"]["error"] . "<br>"; 
       } 
       else 
       { 
        $date = date('YMd'); 
        $path = DOCROOT.'assets/uploads/'.$date.'/'; 
        if (!file_exists($path)) { 
         mkdir($path, 0775); 
        } 
        //other code 
       } 
} 
     } 

Answer 1

Вы должны добавить переменную body к FormData вы отправляете, а не как часть объекта. Попробуйте это:

$("#form").on('submit', function(e) { 
    e.preventDefault(); 
    var formdata = new FormData($('form')[0]); 
    formdata.append('body', $('body').width()); 

    $.ajax({ 
     url: "image/upload", 
     type: "POST", 
     data: formdata 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function(data) { 
      console.log('request successful!'); 
     }   
    }); 
}); 

отметить также, что вам нужно установить атрибут formenctype, как вы в том числе файл в данных:

<form id="form" enctype="multipart/form-data"> 
    <label>Upload Image File:</label><br/> 
    <input name="image" type="file" /> 
    <input type="submit" value="Submit" /> 
</form>