Javascript 数据传输和输入类型=文件问题

Question

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

有没有办法把event.dataTransfer.files将文件放入“放置区”并将其注入(inject) <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();
    });

});