8

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

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

4

1 回答 1

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();
    });

});
于 2015-05-20T23:48:52.137 回答