Ajax $ _POST & $ _FILES bekomme keine Daten

Question

Ich arbeite an einer Website ähnlich wie YouTube, aber für meine Firma. Ich möchte Benutzern ermöglichen, Fotos und Videos selbst hochzuladen (anstatt mich jedes Mal zu fragen).

Ich habe Probleme mit dem Video-Upload-Teil, ich habe die gleiche Technik für den Foto-Upload verwendet und es hat gut funktioniert!

Hier ist mein Code:

$(function() { 
    $('#my_form').on('submit', function (e) { 

    e.preventDefault(); 

    var $form = $(this); 
    var formdata = (window.FormData) ? new FormData($form[0]) : null; 
    var data = (formdata !== null) ? formdata : $form.serialize(); 
    $.ajax({ 
      url: 'MgtImportVideo.php', 
      type: 'POST', 
      contentType: false, 
      processData: false, 
      dataType: 'html', 
      data: data, //data = serialized form 
      xhr: function(){  
       //do stuff like showing percentage progress 
      }, 
      beforeSend : function(){ 
       //do some stuff like incrementing variables 
      }, 
      success: function (response) { 
       //do other stuff like diplaying error/sucess messages 
      } 
    }); 
}); 

I contentType und processData auf false gesetzt, weil ich es war, die für den Upload gehört.

Und die eigentliche Videodatei wird wie folgt gespeichert:

$('#my_form').find('input[name="fileVideo[]"]').on('change', function (e) { 
     var files = $(this)[0].files; 
     var urivideo=false; 

     urivideo=window.URL.createObjectURL(files[0]); 

     //Then do some other stuff (I guess not really important here) 
}); 

Dann in meiner MgtImportVideo.php Datei, der $ _POST und $ _FILES keine Daten erhalten und als leeren Arrays zeigt.

Kann mir jemand helfen, das herauszufinden?

Answer 1

Zum Hochladen einer Datei mit ajax verwenden Sie formData anstelle von serialized form Daten wie serialize encode a set of form elements as a string for submission. Um eine Datei hochzuladen, müssen Sie ein formData-Objekt erstellen und die Datei anhängen und dieses formData-Objekt übergeben.

Ex:

var file_data = $('#pic').prop('files')[0]; 
var form_data = new FormData(); 
form_data.append('file', file_data); 

$.ajax({ 
    url   : 'upload.php',  // point to server-side PHP script 
    dataType : 'text',   // what to expect back from the PHP script, if anything 
    cache  : false, 
    contentType : false, 
    processData : false, 
    data  : form_data,       
    type  : 'post', 
    success  : function(output){ 
     alert(output);    // display response from the PHP script, if any 
    } 
}); 

Answer 2

Erfolg hinzufügen und wenn Daten true zurückgibt, dann können Sie alle Aktionen in Erfolgsfunktion tun

var data_ser = (formdata !== null) ? formdata : $form.serialize(); 
$.ajax({ 
     url: 'MgtImportVideo.php', 
     type: 'POST', 
     contentType: false, 
     processData: false, 
     dataType: 'html', 
     data: data_ser, //data = serialized form 
     success: function(return_data){ //data return in ajax call.  
      if(return_data){ 
       alert('success');  //if data returns true 
      } 
     } 

});