使用jQuery删除后未添加的文件

时间:2017-04-03 19:47:14

标签: jquery ajax

我真的很困惑为什么会这样。我正在为我的表单创建一个拖放区域,到目前为止,我可以删除文件并报告丢弃的内容。然后我尝试在提交之前附加删除的文件然后在提交时通过ajax发送表单。

我可以删除文件,但它们似乎没有提交表单。

      // Flie Input Listener
  .on('change', 'input[type="file"]', function(e) {
    showFiles( e.target.files );
    droppedFiles = "";
    //$form.trigger( 'submit' ); // automatically submit the form on file select
  })
  .on( 'drag dragstart dragend dragover dragenter dragleave drop', '#dropArea', function(e) {
    e.preventDefault();
    e.stopPropagation();
  })
  .on( 'dragover dragenter', '#dropArea', function() {
    $("#dropArea").addClass( 'is-dragover' );
  })
  .on( 'dragleave dragend drop', '#dropArea', function() {
    $("#dropArea").removeClass( 'is-dragover' );
  }).on( 'drop', '#dropArea', function(e) {
        droppedFiles = e.originalEvent.dataTransfer.files;
        showFiles( droppedFiles );  // function to replace text with file name dropped
        var $form = $('#dropArea').closest('form'); find the form the files were dropped on
        console.log($form.attr('id')); // check the form was found
        var files = new FormData($form.get(0));  // create the Form Data object to store the files
        $input = $form.find( 'input[type="file"]' ); // find the input field to attach dropped files
        console.log($input.attr('id')); // check right input item selected
        $.each( droppedFiles, function( i, file ) { // loop round all files attached
          files.append( $input.attr( 'name' ), file );
        });
        $form.trigger( 'submit' ); // auto submit form just for testing 
      })

一切似乎都有效,但拖放的文件不会附加并提交。

1 个答案:

答案 0 :(得分:0)

想到这一点我正在一个单独的函数中创建一个新的FormData对象,该函数覆盖了所有工作。感谢Mike的语法拼写纠正已经连续四天完成,以便让这个项目完成并且只是在咖啡上运行所以输入有点马虎