将FormData转换为动态创建的元素

Question

我不明白为什么我不能从动态创建的元素通过xhr发送文件。这是我的代码：

            $('#thread_file').prepend('<form action="/nti/'+$time+'" enctype="multipart/form-data" method="post"><div class="picture" style="text-align:right;height:30px;line-height:15px;">change file</div><input type="hidden" name="thread" value="a" /><input class="file" data-thread="a" type="file" name="file" accept="image/*" style="display:none!important;" /><progress value="0" min="0" max="100">0%</progress></form>');
                $('form').on('click','.picture',function(){$(this).parent().find('.file').click();});
                $('form').on('change','.file',function(){
                    var $form = $(this).parent();
                    var data = new FormData($form);
                    var xhr = new XMLHttpRequest();
                    var $progress_bar = $form.find('progress');
                    xhr.open('post',$form.action);
                    xhr.onload = function(e)
                    {
                        $form.parent().find('.thread_file').html(e.currentTarget.responseText);
                    };
                    xhr.upload.onprogress = function(e) 
                    {
                        $progress_bar.val(e.loaded/e.total*100);
                    };
                    xhr.send(data);
                    return false;
                });

Answer 1

您需要将表单dom元素传递给FormData，而不是jQuery包装对象

var data = new FormData($form[0]);

读取操作参数也是如此，因为$form是一个jQuery对象，所以使用.attr（）读取操作属性的值或使用$form[0].action

xhr.open('post', $form.attr('action'));

演示：Fiddle