如何将文件从 HTML5 拖放到 Rails 3 应用程序和回形针？

Posted 2023-05-08

【中文标题】如何将文件从 HTML5 拖放到 Rails 3 应用程序和回形针？

【英文标题】：How to POST files from HTML5 Drag-Drop to a Rails 3 App & Paperclip?

【发布时间】：2011-04-15 11:08:54

【问题描述】：

我正在尝试在带有 Paperclip 的 Rails 3 应用程序中获得一些 html5 拖放功能。所以，基本上：

一个或多个文件被拖放到一个 DIV 上 文件被 POST 到 Rails 操作（一起或一次一个） Rails 操作将每个文件保存为 Paperclip 中的新附件

现在我可以让这个工作的唯一方法是发送一个带有文件数据的 XMLHttpRequest 并让我的 Rails 操作读取 request.raw_post ...这不是一个可行的解决方案，因为我需要发送额外的 POST参数和真实性令牌。

这是我目前所拥有的：

<!-- IN MY VIEW -->
<h2>Drag and drop upload</h2>

<div id="drop">
  <h2>Drop Files Here</h2>
</div>

<script type="text/javascript" charset="utf-8">
  var dropbox = document.getElementById("drop");  
  drop = function(evt)    
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.dataTransfer.files;
    var count = files.length;
    if (count > 0) 
        // handleFiles(files);
      var url = '/images/raw';
      var request = new XMLHttpRequest();
      request.open("POST",  url, true); // open asynchronous post request
      request.send(files[0]);
    
  
  dragEnter = function(evt) 
    evt.stopPropagation();
    evt.preventDefault();
  
  dragExit = function(evt) 
    evt.stopPropagation();
    evt.preventDefault();
  
  dragOver = function(evt) 
    evt.stopPropagation();
    evt.preventDefault();
  
  // init event handlers
  dropbox.addEventListener("dragenter", dragEnter, false);
  dropbox.addEventListener("dragexit", dragExit, false);
  dropbox.addEventListener("dragover", dragOver, false);
  dropbox.addEventListener("drop", drop, false);
</script>

还有我的控制器操作：

class ImagesController < ApplicationController

  # ... Normal REST actions 

  def raw
    name = "tmp_image.png"
    data = request.raw_post
    @file_content = File.open("#Rails.root.to_s/tmp/#name", "wb") do |f| 
      f.write(data)
    end
    @image = Image.new(:attachment => File.new("#Rails.root.to_s/tmp/#name"))
    @image.save
    File.unlink("#Rails.root.to_s/tmp/#name")
    render :text => 'success'    
  end
end

那么，使用附加参数将拖放文件发布到我的应用程序的正确方法是什么？

（如果有帮助，我将整个实验设置为 public GitHub repo here）

【问题讨论】：

我写了我的经验@@marc-bowes.com/2011/08/17/drag-n-drop-upload.html。非常容易实现多个（相对较小）文件上传的解决方案。

【参考方案1】：

看看

https://github.com/blueimp/jQuery-File-Upload/wiki

然后向下滚动到 Ruby（在 Rails 上）。这可能正是您正在寻找的内容，包括有关如何将它与 Rails 3 和回形针一起使用的教程。根据我自己的经验，它就像一种魅力。

正如 Joost 所说： https://github.com/yortz/carrierwave_jquery_file_upload 展示了如何将carrierwave与jquery_file_upload结合的一个很好的例子

【讨论】：

上面的 wiki 链接已更改。这是目前使用carrierwave和DragonFly的一个：github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V5。这是载波的另一个示例：github.com/yortz/carrierwave_jquery_file_upload

【参考方案2】：

也许这些可以提供帮助：https://github.com/valums/file-uploader 和 https://github.com/newbamboo/rack-raw-upload