Verwenden von PHP oder jQuery zum Übermitteln einer dynamisch generierten Datei

Question

Ich versuche, mit der "API" bei einer anderen Firma zu interagieren. Ihre API ist eigentlich ein Datei-Upload-Formular, das nach einer CSV-Datei fragt. Es ist ein Standard-HTML-Formular mit einem Element wie folgt:

<input type="file" id="inputFileUploadFile" name="UploadFile"> 

Ich habe eine Seite, auf der ein Benutzer eine Reihe von Tabellendaten anzeigen kann. Ich suche nach einer Möglichkeit, eine Ein-Tasten-Lösung zu haben, wo der Benutzer die Tabellendaten einsehen kann und diese als eine Datei an diese sogenannte API senden kann.

Das Generieren der Daten im CSV-Format ist einfach genug. Die Frage ist konkret, wie bekomme ich diese Daten dann in das Formularelement und sende es ein?

Ich kann entweder jQuery verwenden, um ein verstecktes HTML-Formular zu bearbeiten und zu senden, oder ich kann PHP verwenden, um das Formular direkt zu senden. Eine Antwort in beiden Formaten funktioniert.

Answer 1

Ein Ansatz besteht darin, FormData Class zu verwenden. Unten finden Sie einen Beispielcode. Sie müssen dies innerhalb der Funktion aufzurufen, wenn Sie den Beitrag auf die Schaltfläche aufrufen klicken usw.

 --- add enctype to form tag---- 
     <form id="upload_form" enctype="multipart/form-data"> 

     -- on submit create a new object assing key value pairs and post it . 

     var formData = new FormData($('#upload_form')[0]); 

     formData.append('key1', 'val1'); 
     formData.append('key2', 'val2'); 
     // Main magic with files here 
     formData.append('image', $('input[type=file]')[0].files[0]); 


     $.ajax({ 
      url: 'Your url here', 
      data: formData, 
      type: 'POST', 
      // THIS MUST BE DONE FOR FILE UPLOADING 
      contentType: false, 
      processData: false, 
      // ... Other options like success and etc 
     }) 

Answer 2

Dank Yashveer Singh konnte ich zusammen alle Stücke setzen. Hier ist die jQuery/Javascript-Version:

//first, create a Blob object. Assume that variable myCSV has our CSV data as a string 
//The Blob constructor requires an array, so place in brackets []. 
var myblob = new Blob([myCSV], {type: 'text/csv'}); 

//Create a new FormData object. 
var myFD = new FormData(); 
//Add our file (the blob) to it. 
myFD.append('htmlFormName', myblob, 'someFileName.csv'); 
//We can also append other fields if necessary. 
myFD.append('inputName', 'inputValue'); 

//If we're using jQuery to send the form... 
$.ajax({ 
    url: 'http://remotewebsite.com/formhandler.php', 
    type: 'POST', 
    data: myFD, 
    processData: false, // <-- important! 
    contentType: false, // <-- important! 
    success: function(data) { 
     console.log('Posted successfully.'); 
    } 
});