Как добавить дополнительные параметры POST для загрузки файла ajax?

Question

Я использую ajax-файл, загружающий javascript и php-скрипт для загрузки изображения. Он работает удовлетворительно с $ _FILES, но мне нужно отправить некоторые дополнительные данные в скрипт обработки. Форма HTML выглядит следующим образом:

<form id="image1" action="" method="post" enctype="multipart/form-data"> 
    <label>image 1?</label> 
    <p><input type="file" class="saveImage" name="image1" value="<?php echo $something; ?>" id="<?php echo $id; ?>" additional_info="some data" /></p> 
    <p> <input type="submit" value="Upload" class="submit" /></p> 
</form> 

мне нужно, чтобы быть в состоянии передать переменную идентификатор и некоторые другие данные, называют его «additional_data» в PHP скрипт, затем обработать его в моем PHP скрипт с использованием $additional_data = $_POST['additional_data']. Javascript я использую:

<script> 
    $(document).ready(function (e) { 
     $("#image1").on('submit',(function(e) { 
     e.preventDefault(); 
     $("#message").empty(); 
     $('#loading').show(); 
     var DATA=$(this).val(); 
     var ID=$(this).attr('id'); 
     var ADDL=$(this).attr('additional_data'); 
     var dataString = 'image1='+DATA+'&id='+ID+'&additional_info='+ADDL; 
     $.ajax({ 
      url: "uploadFile.php", 
      type: "POST",   
      // data: new FormData(this), 
      data: new FormData(this,dataString), 
      contentType: false, 
      cache: false, 
      processData:false,   
      success: function(data)  
      { 
      $('#loading').hide(); 
      $("#message").html(data); 
      } 
     }); 
     })); 
    }); 
    </script> 

Он не посылает dataString, только массив ФАЙЛЫ.

Answer 1

Я надеюсь, что вы правильно поняли. Может быть, этот фрагмент кода поможет вам:

var formData = new FormData(); 
formData.append("image1", fileInputElement.files[0]); 
formData.append("ID", ID); 
formData.append("ADDL", ADDL); 

А затем установить эту FormData переменную в качестве данных:

type: "POST",   
data: formData, 
contentType: false, 

Answer 2

Я также хотел бы сделать то же самое. Вот мое решение:

JS часть:

var file_data = this.files[0]; 
    file_data.name = idaviz +'.pdf'; 
    var form_data = new FormData(); 
    form_data.append("file", file_data); 
    form_data.append('extraParam','value231'); 
    console.log(file_data); 
    console.log('here'); 
    var oReq = new XMLHttpRequest(); 
    oReq.open("POST", "ajax_page.php", true); 
    oReq.onload = function (oEvent) { 
     if (oReq.status === 200) { 
      console.log('upload succes',oReq.responseText); 
     } else { 
      console.log("Error " + oReq.status + " occurred when trying to upload your file.<br \/>"); 
     } 
    }; 

    oReq.send(form_data); 
}); 

РНР часть:

echo $_REQUEST['extraParam']; //this will display "value231" 
var_dump($_FILES['file']); //this will display the file object 

Надеется, что это помогает.

Дополнительная информация о дополнительных параметрах на formData может быть найдена here!