如何将文件从HTML5拖放到Rails 3 App和Paperclip？

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

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

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

这是我到目前为止所拥有的：

 
Drag and drop upload
 
 
Drop Files Here
 
  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);  

我的控制器动作：

 class ImagesController  File.new("#{Rails.root.to_s}/tmp/#{name}")) @image.save File.unlink("#{Rails.root.to_s}/tmp/#{name}") render :text => 'success' end end 

那么，使用其他参数将POST拖放文件拖放到我的应用程序的正确方法是什么？

（如果有帮助，我将整个实验作为公共GitHub回购在这里 ）

Answer 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结合起来的一个很好的例子

Answer 2

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