Comment puis-je ajouter d'autres paramètres POST ajax upload de fichier?

Je suis en utilisant ajax upload d'un fichier javascript et php script pour charger une image. Il fonctionne de manière satisfaisante avec $_FILES mais j'ai besoin d'envoyer des données supplémentaires dans le script de traitement. Le formulaire HTML ressemble à:

<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>

J'ai besoin d'être en mesure de passer une variable id et quelques autres données, de l'appeler "additional_data" pour le script php, puis le traiter dans mon script php à l'aide de $additional_data = $_POST['additional_data']. Le javascript que j'utilise est:

    <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>

Il n'envoie pas le dataString, seuls les FICHIERS de tableau.

Pourquoi ne pas mettre les autres données dans d'autres champs cachés?

OriginalL'auteur Bob M | 2015-03-19

  1. 3

    Je voulais aussi faire la même chose.
    Voici ma solution :

    La JS partie :

    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);
});

    La partie PHP:

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

    Espère que cela aide.

    Plus d'infos à propos des paramètres supplémentaires sur formData peut être trouvé
    ici!

    OriginalL'auteur Alin Panainte

  2. 1

    J'espère que je vous comprends bien. Peut-être que cet extrait vous aide à:

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

    Et définissez ce formData variable de données:

    type: "POST",        
data:  formData,
contentType: false,
    La première section de code (var formData ...) j'ai ajouté juste en dessous de mon var dataString. Lorsque j'ai ajouté le premier formData.append("image1", fileInputElement.files[0]); ligne il provoque le formulaire de ne pas poster. J'ai testé en commentant la ligne. Même problème avec les autres ajouter des lignes.
    Voir un exemple de code: [ dottedi.us/ajax_upload ]
    Je suis toujours à la recherche d'une solution de travail. Malheureusement, la réponse n'a pas fonctionné.

    OriginalL'auteur thilo__f