使用Prototype.js插件上传AJAX

Question

如何使用prototype.js插件使用ajax上传图像文件，我需要在上传后显示这些图像请帮助解决这个问题。

由于

Answer 1

您也需要服务器上的东西。

我建议使用回形针将文件存储在您的服务器上。

设置好后，你应该让你的ajax生成一个带有“文件”的表单。领域。另外，请记住表单必须是多部分。

<% form_for @picture, :html => { :multipart => true } do |f| %>
  <%= f.file_field :file %>
  <%= f.submit "Submit" %>
<% end %>

如果你只需要上传一个文件，你可能不需要完整的AJAX - 只有普通的javascript - 用于显示/隐藏表单。像这样：

<%= link_to_function 'Show/Hide image upload') do |page|
      page.visual_effect :toggle_blind, 'upload_image'
    end
%>

<div id='upload_image' style='display:none'>
  <% form_for @picture, :html => { :multipart => true } do |f| %>
    <%= f.file_field :file %>
    <%= f.submit "Submit" %>
  <% end %>
</div>

请注意，为了隐藏/显示div我正在使用Scriptaculous效果，而不仅仅是原型 - 无论如何，scriptaculous默认包含在rails上。

Answer 2

您可以将remote_form_for与upload_fu或paperclip等文件上传插件一起使用，然后在上传后将图像渲染回视图。可能在控制器中使用update_page。

Answer 3

https://github.com/JangoSteve/remotipart

Remotipart是一个Ruby on Rails gem，可以在Rails 3.0和Rails 3.1远程表单中使用jQuery上传AJAX文件。这个gem增强了原生的Rails jQuery远程表单功能，可以实现异步文件上传，几乎不需要修改你的应用程序。

gem 'remotipart', '~> 1.0'
bundle install