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>