AJAX 请求和返回答案

【问题标题】：AJAX Request & ReturnAJAX 请求和返回
【发布时间】：2011-10-19 12:58:49
【问题描述】：

我正在创建一个“新博客”表单，表单中有一些照片上传字段。有没有办法可以使用 AJAX 发送帖子请求，上传照片，然后返回照片 url 以显示在“新博客”表单上？我的后端是用 ruby on rails 编写的。

我希望这是有道理的！任何帮助都非常感谢！

谢谢，亚历克斯

【问题讨论】：

标签： ruby-on-rails ruby ajax upload request

【解决方案1】：

是的，但它有点复杂。问题是您无法通过 AJAX 发送上传的文件，但是有一个大多数人使用的简单解决方法。

它是这样工作的：您将照片上传到一个不可见的 iFrame 中。您将此 iframe 设置为上传表单的目标，用户将能够提交表单而无需重新加载页面。

例子：

<iframe id="upload"></iframe>
<%= form_for @photo, :html => { :multipart => true, :id => 'photo_upload_form', :target => 'upload' }, :url => photos_path do |f| %>
  <div class="field">
    <%= f.label :image, 'Upload Photo' %>
    <%= f.file_field :image %>
  </div>    
<% end %>

...当然也可以使用 CSS 来隐藏 iFrame。我想我曾经在使用display: none 隐藏 iFrame 时遇到过问题，所以我建议使用以下方法将其移出屏幕：

#upload { position: absolute; left: -10px; top: -10px; width: 1px; height: 1px; }

最后，您可以在通过window.parent 在隐藏 iFrame 中呈现的视图中使用 JavaScript，这样您就可以在上传表单中实际显示上传的图像。

【讨论】：

很有趣，我目前正在做类似的事情。只需将照片表单放入 iframe 中，然后当您提交照片时，框架就会重定向到上传的照片。你不能只发回照片的网址吗？例如example.com/uploads/test.jpg ???
当然有很多不同的方法来实现这一点，但我认为最简单的方法是只使用一个完全隐藏的 iFrame。无论您是在该 iFrame 的视图中编写 JS 代码，还是发送一个 URL 并将 JS 放在原始视图中，这都取决于您。