Formdata ist leer

Question

Ich versuche, einige JPG-Dateien mit Jquery zu senden, aber die Formulardaten kommt leer

hier die html ist

<input id="fileUpload" multiple="multiple" type="file"/> 
<ul> 
<li><div id="image-holder"></div></li> 
<li><input type="submit" value="Next"></li> 
</ul> 

Hier ist das Skript

<script type="text/javascript"> 
    $('#submit').click(function() { 

    var files = $("[type='file']")[0].files; 

    var formdata = new FormData(); 

    $.each(files, function(key, value) 
    { 
     console.log(value) 
     formdata.append('file-'+key, value); 
     console.log(formdata) 
    }); 

    $.ajax({ 
      type: "POST", 
      data: { 'formdata' : formdata , csrfmiddlewaretoken:'{{csrf_token}}'}, 
      url : "{% url 'data_entry' %}", 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function(data) { 
      }, 
      error: function(response, error) { 
     } 
    }); 
}); 
</script> 

das ist, was Ich bekomme, wenn ich die Formdaten trage FormData {} Warum ist die Formdaten leer?

Answer 1

FormData Objekt sollte nicht leer sein. Sie können FormData.get() verwenden, um den Wert abzurufen, der unter dem Namen Schlüssel innerhalb des Objekts FormData gespeichert wurde. Beachten Sie auch #submit Element erscheint nicht bei html; wenn Sie versuchen, <input type="submit"> Element zu wählen, können Sie Selektor $("input[type=submit]").click(handler)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="fileUpload" multiple="multiple" type="file" /> 
 
<ul> 
 
    <li> 
 
    <div id="image-holder"></div> 
 
    </li> 
 
    <li> 
 
    <input type="submit" value="Next"> 
 
    </li> 
 
</ul> 
 
<script type="text/javascript"> 
 
    $("input[type=submit]").click(function() { 
 

 
    var files = $("[type='file']")[0].files; 
 

 
    var formdata = new FormData(); 
 

 
    $.each(files, function(key, value) { 
 
     formdata.append("file-" + key, value); 
 
     console.log(formdata.get("file-" + key)) 
 
    }); 
 

 
    }); 
 
</script>

verwenden