Anfügen von Formulareingaben zu Formdata Objekt nicht arbeiten

Ich habe eine Form, die für das Senden von mails.It ist Felder enthalten wie to_name,subject,message and attachment button .I wird .file_add_btn auf Klick auf den Button mit der Klasse ein Dateieingabefeld erstellen.Anfügen von Formulareingaben zu Formdata Objekt nicht arbeiten

//click event for add files 
$(".file_add_btn").click(function(){ 
    if($("#file_div").html() == '') 
    { 
     $("#file_div").append('<div class="file_btn_div" id="file_btn_div_first"><input type="file" class="btn_browse" name="file_uploads[]">'+ 
     '<input type="button" class="del_file" value="X"></div>'); 
    } 
    else 
    { 
     if($(document).find('.btn_browse:last').get(0).files.length !==0) 
     { 
      $("#file_div").append('<div class="file_btn_div"><input type="file" class="btn_browse" name="file_uploads[]">'+ 
      '<input type="button" class="del_file" value="X"></div>'); 
     } 
    } 

});

Ich schreibe die folgende Funktion, um Dateieingaben in formData einzuschließen.

$.fn.serializefiles = function() { 
    var obj = $(this); 

    var form_data = new FormData(this[0]); 
    $.each($(obj).find('.btn_browse'), function(i, tag) { 
     $.each(tag.files, function(i, file) { 
      console.log(tag.name+' '+file.name)//this is printing in console 
       form_data.append(tag.name, file); 
     }); 
    }); 
    var params = $(obj).serializeArray(); 
    $.each(params, function (i, val) { 
      console.log(val.name+'<br/>'); 
      console.log(val.value+'<br/>'); 
      **//here file names are not coming.All other elements are coming.They are not adding to form_data object** 
      form_data.append(val.name, val.value); 
    }); 
    return form_data; 
};

Meine Ajax-Aufruf wie folgt lautet:

$.ajax({ 
    type: "POST", 
    url: 'process.php', 
    data: $("#compose_message").serializefiles() ,//formID=#compose_message 
    asyn: true, 
    cache: false, 
    processData: false, 
    contentType: false, 
    success:function() 
      ....

Ich bin nicht in der Lage die Eingänge in die form_data object.In Konsole anfügen, ich sehe [object FormData] innerhalb des POST auf die Schaltfläche klicken.

Quelle

2016-06-01 Techy

Ich bin verwirrt, warum Sie brauchen diese 'serializefiles' Funktion, wann sollten Sie in der Lage sein, einfach tun, um' Daten: neue Formdata ($ ("# compose_message") [0]) '? – Mikey

Wenn wir 'data: new FormData ($ (" # compose_message ") [0])', wie kann ich die multiplen Dateieingaben und andere formdatas @ Mikey – Techy

@Mikey Ich habe 'console.log (JSON.Stringify (new FormData ($ ("# compose_message") [0]))); ', das gibt mir den leeren Wert' {} 'in der Konsole. – Techy

Bearbeiten: Mein erster Kommentar oben war korrekt. Sie müssen nichts Besonderes machen, außer das Formularobjekt in den FormData Konstruktor zu übergeben, wie in meinem Beispiel unten gezeigt.

console.log(JSON.stringify(formData)); werden nie die Werte der FormData zeigen. Wenn Sie jedoch in der Netzwerkregisterkarte Ihres Browsers nachsehen, zeigt die gesendete Anforderung die übermittelten Werte an.

Wenn Sie die Daten überprüfen möchten, bevor sie übergeben werden, können Sie diese answer verwenden.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <style> 
     input { 
      float: left; 
      clear: left; 
     } 
    </style> 
</head> 
<body> 
    <form method="post" enctype="multipart/form-data"> 
     <input type="text" name="text" value="text"> 
     <input type="hidden" name="hidden" value="hidden"> 
     <input type="file" name="file_uploads[]" value=""> 
     <input type="file" name="file_uploads[]" value=""> 
     <input type="file" name="file_uploads[]" value=""> 
     <input type="button" value="Add"> 
     <input type="submit" value="Submit"> 
    </form> 
    <script> 
    $(function() { 
     $('form').on('submit', function (e) { 
      e.preventDefault(); 
      var formData = new FormData(this); 
      console.log(JSON.stringify(formData)); // will always be {} 

      $.ajax({ url: '404', type: 'post', data: formData, processData: false, contentType: false }); 
     }); 

     $('[type=button]').on('click', function() { 
      $(this).before('<input type="file" name="file_uploads[]" value="">'); 
     }); 
    }); 
    </script> 
</body> 
</html>

Quelle

2016-06-01 11:36:15 Mikey

angefügt Ich habe das Ergebnis mit 'Konsole überprüft .log (JSON.stringify (formData)); 'nach dem Kopieren deines Codes, aber es gibt mir' {} '. Was kann der Grund sein mein Bruder – Techy

Das ist, weil Sie den Inhalt von' FormData' auf diese Weise nicht drucken können. Ich habe meine Antwort mit einem schnellen Beispiel bearbeitet und lokal getestet. – Mikey

Ich habe diesen Code verwendet, aber in meiner 'process.php', gibt es mir' Uncaught Ausnahme 'RuntimeException' mit der Nachricht 'Ungültige Parameter.' Seit ich verwendet habe' if ( ! Isset ($ _ FILES ['file_uploads'] [' Fehler ']) || is_array ($ _ FILES [' file_uploads '] [' Fehler ']) ) { Neue RuntimeException auslösen (' Ungültige Parameter."); } ' – Techy

genaue Daten angeben für Formulardaten

var formData = new FormData(); 
 
formData.append('section', 'general'); 
 
formData.append('action', 'previewImg'); 
 
// Main magic with files here 
 
formData.append('image', $('input[type=file]')[0].files[0]);

Ajax-Anfrage mit jquery Willen wie folgt aussieht:

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

Quelle

2016-06-01 11:19:29

Sollte ich jedes Formular Elemente separat anhängen müssen.Ich mache das gleiche in meiner Funktion – Techy

Ich habe 'formData.append ('Abschnitt', 'allgemein') verwendet;' zum Testen. Dann auch 'console.log (JSON .stringify (new FormData ($ ("# compose_message") [0]))); 'gibt mir' {} 'string.Ich denke,' formData' wurde nicht mit den Werten – Techy

Anfügen von Formulareingaben zu Formdata Objekt nicht arbeiten

Antwort

Verwandte Themen