Javascript dataTransfer和input type = file问题

Question

作为工作的一部分，我需要做的是尝试添加javascript拖放功能。通常，通过拖放操作，将传递event.dataTransfer.files给对外部文件（例如upload.php）的ajax调用以保存文件。但是，就我而言，我需要将其与具有<input type="file">字段的现有表单集成。

event.dataTransfer.files当有人将文件拖放到“放置区域”并将其注入<input type="file">字段时，是否有办法获取信息，以便在提交表单时上传文件（例如，模仿文件字段上的“浏览”并选择一个文件）？

Answer 1

是的，出于安全原因，input[type=file] 是只读的。我刚刚通过将 input[type=file] 转换为 input[type=hidden] 并将值设置为图像的 base64 编码 URI 解决了类似的问题。

（顺便说一句，这可以自动与 Paperclip https://github.com/thoughtbot/paperclip/blob/master/lib/paperclip/io_adapters/data_uri_adapter.rb配合使用）

这是我的 jquery 代码：

$(function() {

  function renderPreviewImageFromFile(e,file) {
    file = file || $(this).prop('files')[0];
    if(file) {
      var img     = $(this).parents('li').find('img.preview');
      var reader = new FileReader();
      reader.onload = function(e) {
        img.attr('src', e.target.result);
      }      
      reader.readAsDataURL(file);
      return img.attr('src');
    }
  }

  $("ul.images-list")
    .on('change','input.file',renderPreviewImageFromFile);

  jQuery.event.props.push("dataTransfer");
  $('.file-drop')
    .on('dragover dragenter', function(e) {
      $(this).addClass('hover');
      e.preventDefault();
      e.stopPropagation();
    }).on('dragleave dragexit', function(e) {
      $(this).removeClass('hover');
      e.preventDefault();
      e.stopPropagation();
    }).on('drop', function(e) {
      $(this).removeClass('hover').find('span').remove();
      e.preventDefault();
      e.stopPropagation();

      // change input into hidden field
      file = e.dataTransfer.files[0];
      input = $(this).parents('li').find('input.file');
      value = renderPreviewImageFromFile.apply(input, [null, file]);
      input.attr('type','hidden').val( value ).parents('div.input').hide();
    });

});