Formdata是空的

Question

我正在尝试使用jquery发送一些jpg文件但是formdata是空的

这是html

<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">
    $('#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>

这是我在控制formdata FormData {}时得到的结果为什么formdata为空？

Answer 1

FormData对象不应为空。您可以使用FormData.get()检索存储在FormData对象中的命名键的值。另请注意，#submit元素未显示在html;如果您尝试选择<input type="submit">元素，则可以使用选择器$("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>