Question

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

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

Answer 1

是的，出于安全原因，输入[type = file]是只读的。我刚刚通过将输入[type = file]转换为输入[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();
    });

});

Javascript dataTransfer和input type = file issue

1 个答案: