Javascript 使用Ruby on Rails进行HTML5文件拖放上载

在我的RubyonRails应用程序中，我有一个简单的文件上传按钮，我正试图使用HTML5中的文件/文件阅读器API，特别是使用一个拖放框来替换它。照原样，我使用Ruby脚本将文件上传到我的public/data文件夹。我不知道如何将拖放脚本与之集成。我的想法是让我已经隐藏的文件上传按钮，当用户试图提交时，使用Javascript将其值设置为拖放图像的路径

但是，当我尝试提交时，会出现以下错误：

文件名太长-public/data/data:image/jpeg；base64，/9j/4QAYRXHPZGAASUKQAAGAAAAAAP/SABFEDWNREQAABAAQAABKAAD/4QMTAHR0CDOVL25ZLMFB2JLLMNVBS94YXAVMS4WLWA8P3HWYWNJ

因为HTML5给出的临时文件存储名称太长了，我猜

我尝试将字符串连接到前60个字符，但结果显示错误：

没有这样的文件或目录-public/data/data:image/jpeg；base64，/9j/4QAYRXHPZGAASUKQAAAAAAAAAAAAAA

在任何情况下，都不会将文件添加到

public/data

文件夹中

我的HTML：

<%= form_tag( { :action => 'create' }, :multipart => true ) %>
<div id="dropbox"><span id="droplabel">Drop file here...</span></div>
<img id="preview" alt="[ preview will display here ]" />

<%= hidden_field_tag :uploadfile, :id => "uploadfile", :name => "uploadfile" %>
<br /><br />
<div id="submit">
<%= submit_tag( "Upload file" ) %>
</div>

和JS：

---

重点是使用params[：uploadfile]，因为名称值是不必要的，如果您想要一个唯一的密钥，您可以只使用

SecureRandom.uuid

这个问题看起来像是您将文件作为Base64编码的数据URL发送，这很好，但是在发布到服务器时文件名并不随它一起发送。在将文件转换为数据URL之前，您可能需要提取文件名，以便可以将其与参数中的文件一起发送。或者，按照Madao的建议创建一个新的文件名（UUID）

这至少可以解决您的文件名问题：

def create
    name = params[:uploadfile]
    directory = "public/data"
    path = File.join(directory, name)
    File.open(path, "wb") { |f| f.write(params[:uploadfile].read) }
     @project = Project.new({:filename => name, :location => path})

    respond_to do |format|
      if @project.save
        format.html { redirect_to @project, notice: 'Project was successfully created.' }
        format.json { render json: @project, status: :created, location: @project }
      else
        format.html { render action: "new" }
        format.json { render json: @project.errors, status: :unprocessable_entity }
      end
    end
  end

---

我应该向您推荐这个gem：试试看，我认为它的实现非常简单。只要看看ruby文档就知道了。它很棒，但这不是一个gem，它是一个jquery插件。wiki[参考了许多ruby示例和一个gem[

$("#submit input").click(function() {
    $("#uploadfile").val($("#preview").attr("src"));
});

def create
    ##
    file = params[:uploadfile]
    name = params[:filename] || SecureRandom.uuid
    ##
    directory = "public/data"
    path = File.join(directory, name)
    File.open(path, "wb") { |f| f.write(file.read) }
    @project = Project.new({:filename => name, :location => path})

    respond_to do |format|
      if @project.save
        format.html { redirect_to @project, notice: 'Project was successfully created.' }
        format.json { render json: @project, status: :created, location: @project }
      else
        format.html { render action: "new" }
        format.json { render json: @project.errors, status: :unprocessable_entity }
      end
    end
  end