javascript - Jquery/Ajax 拖放文件 uploader 不提交文件

Question

我有一个来自 this 的拖放文件 uploader 教程。用户可以单击按钮选择文件，也可以拖放。无论哪种方式，都会显示图像预览，然后在提交表单时上传图像。

以老式方式选择文件效果很好 - 显示图像预览并在表单提交时上传

但是，如果我拖放图像，则会显示预览，但当我提交表单时，它们不会上传。

代码如下:

var isAdvancedUpload = function() {
  var div = document.createElement('div');
  return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
}();

var $form = $('ui form');
var $fileBox = $('.box');

var $input = $fileBox.find('input[type="file"]'),
  $label = $fileBox.find('label');
showFiles = function(files) {
  $label.text(files.length > 1 ? ($input.attr('data-multiple-caption') || '').replace('{count}', files.length) : files[0].name);
};

if (isAdvancedUpload) {
  var droppedFiles = false;
  $fileBox.addClass('has-advanced-upload');
  $fileBox.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
  });
  $fileBox.on('dragover dragenter', function() {
    $fileBox.addClass('is-dragover');
  });
  $fileBox.on('dragleave dragend drop', function() {
    $fileBox.removeClass('is-dragover');
  });
  $fileBox.on('drop', function(e) {
    droppedFiles = e.originalEvent.dataTransfer.files;
    var $imgDiv = $('.selected-images');
    $.each(droppedFiles, function(index, file) {
      var img = document.createElement('img');
      img.onload = function() {
        window.URL.revokeObjectURL($.src);
      };
      img.height = 100;
      img.src = window.URL.createObjectURL(file);
      $imgDiv.append(img);
      showFiles(droppedFiles);
    });
  });
}

$form.on('submit', function(e) {
  if ($fileBox.hasClass('is-uploading')) return false;

  $fileBox.addClass('is-uploading').removeClass('is-error');

  if (isAdvancedUpload) {
    e.preventDefault();

    var ajaxData = new FormData($form.get(0));

    if (droppedFiles) {
      $.each(droppedFiles, function(i, file) {
        ajaxData.append($input.attr('name'), file);
      });
    }

    $.ajax({
      url: $form.attr('action'),
      type: $form.attr('method'),
      data: ajaxData,
      dataType: 'json',
      cache: false,
      contentType: false,
      processData: false,
      complete: function() {
        $fileBox.removeClass('is-uploading');
      },
      success: function(data) {
        $fileBox.addClass(data.success == true ? 'is-success' : 'is-error');
        if (!data.success) $errorMsg.text(data.error);
      },
      error: function() {
        console.log(data.error);
      }
    });
  } else {
    var iframeName = 'uploadiframe' + new Date().getTime();
    $iframe = $('<iframe name="' + iframeName + '" style="display: none;"></iframe>');

    $('body').append($iframe);
    $form.attr('target', iframeName);

    $iframe.one('load', function() {
      var data = JSON.parse($iframe.contents().find('body').text());
      $form
        .removeClass('is-uploading')
        .addClass(data.success == true ? 'is-success' : 'is-error')
        .removeAttr('target');
      if (!data.success) $errorMsg.text(data.error);
      $form.removeAttr('target');
      $iframe.remove();
    });
  };
});

$input.on('change', function(e) {
  showFiles(e.target.files);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="ui form" action="/signup" method="post" enctype="multipart/form-data">

  <!-- text inputs -->

  <div class="field">
    <div class="box box__input">
      <input class="box__file" type="file" name="photos" id="file" data-multiple-caption="{count} files selected" multiple />
      <label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
      <button class="box__button" type="submit">Upload</button>
    </div>
    <div class="box__uploading">Uploading&hellip;</div>
    <div class="box__success">Done!</div>
    <div class="box__error">Error! <span></span>.</div>
  </div>

  <!-- text inputs -->

</form>

Answer 1

我也遇到了这个问题。终于找到解决办法了。

这是因为当文件被拖放时，拖放事件仅显示文件信息，但未在文件输入控件中设置。因此，文件输入保持为空(或者如果之前手动选择则具有选定的文件)。

因此，当提交表单时，它仅通过手动方法提交选定的文件或为空。

要在文件输入中设置选定的文件，请在放置事件中设置文件输入控件的 files 属性。

$("#file").prop("files", droppedFiles);

Drag-and-drop file uploading without AJAX, synchronously in the foreground?

感谢上面的回答，我尝试了。不知何故，我认为属性 files 是只读的，因此我没有尝试它。