問題描述

我正在嘗試在帶有 Paperclip 的 Rails 3 應(yīng)用程序中獲得一些 html5 拖放功能.所以，基本上:

I'm trying to get some html5 drag-and-drop functionality in a Rails 3 app with Paperclip. So, basically:

1. 一個或多個文件被拖放到一個 DIV 上
2. 文件被 POST 到 Rails 動作(一起或一次一個)
3. Rails 操作將每個文件保存為 Paperclip 中的新附件

現(xiàn)在，我可以讓它工作的唯一方法是發(fā)送一個帶有文件數(shù)據(jù)的 XMLHttpRequest 并讓我的 Rails 操作讀取 request.raw_post ...這不是一個可行的解決方案，因?yàn)槲倚枰l(fā)送額外的 POST參數(shù)和真實(shí)性令牌.

Right now the only way I can get this working is by sending an XMLHttpRequest with the File data and having my Rails action read the request.raw_post ... this isn't a workable solution because I need to send along additional POST params and the authenticity token.

這是我目前所擁有的:

<!-- 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

那么，使用附加參數(shù)將拖放文件發(fā)布到我的應(yīng)用程序的正確方法是什么?

So, what's the proper way to POST drag-and-drop files to my app with additional params?

(如果有幫助，我將整個實(shí)驗(yàn)作為 這里的公共 GitHub 存儲庫)

(If it helps, I have the entire experiment as a public GitHub repo here)

推薦答案

看看

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

然后向下滾動到 Ruby(在 Rails 上).這可能正是您正在尋找的內(nèi)容，包括有關(guān)如何將它與 Rails 3 和回形針一起使用的教程.根據(jù)我自己的經(jīng)驗(yàn)，它就像一種魅力.

and scroll down to Ruby (on Rails). That probably is exactly what you are looking for, including a tutorial on how to use it with Rails 3 and paperclip. And from my own experiences it works like a charm.

正如 Joost 所說:https://github.com/yortz/carrierwave_jquery_file_upload展示了如何將carrierwave與jquery_file_upload結(jié)合的一個很好的例子

And as Joost commented: https://github.com/yortz/carrierwave_jquery_file_upload shows a nice example of how to combine carrierwave with jquery_file_upload

這篇關(guān)于如何將文件從 HTML5 拖放到 Rails 3 應(yīng)用程序和回形針?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！