如何使用 jQuery 和 Rails 上传图像并在不刷新的情况下显示它？答案

【问题标题】：how to upload image and show it without refresh with jQuery and Rails?如何使用 jQuery 和 Rails 上传图像并在不刷新的情况下显示它？
【发布时间】：2012-02-01 00:44:42
【问题描述】：

我想上传一张图片，使用类似

<form ...>    
    <input type="file" id="upload"></input>
</form>

表单没有提交按钮，我做一个div来代替：

<div id="submit"></div>

我希望当div被点击的时候，里面的图片会被上传，然后在另一个img中显示而不刷新。

我知道我需要使用 ajax，但我不知道如何使用 jQuery 和 Rails 来实现它。

以下是我的问题：

如何将上传的文件发布到控制器

我尝试使用$.post，但是$("#upload").val()只返回文件路径，没有内容。
这是我实现目标的想法，可以实现吗？

(1)将函数绑定到$("#submit").click，将文件发布到控制器

(2)控制器将文件保存在/public文件夹中，渲染文件url

(3)定义一个函数作为 $.post 的回调函数，其中将一些的 src 设置为 url

如果我的想法有问题，请告诉我正确的方法...

谢谢！！

【问题讨论】：

不幸的是，大多数浏览器还不支持此功能，因此解决方法包括使用隐藏的 flash 对象和 iframe - 最流行的工具包之一是 Uploadify：uploadify.com
...我明白了..但仍然存在问题..我尝试使用需要从控制器返回 javascript 的 iframe。所以我在 Rails 中使用了 render :js => "..." 。但是脚本无法执行……不知道为什么……

标签： jquery ruby-on-rails ajax

【解决方案1】：

最好的解决方案是使用jQuery plugin，这将帮助您解决问题。

上传图片后，只需返回 JSON 作为响应，其中包含图片的位置。

然后用 jQuery 或纯 JavaScript 更新图像的“src”属性。

JSON

{ url: "http://example.com/uploads/image-222.jpg" }

上传成功时执行的JS

$('#id-of-your-image').attr(src, data.url);

数据是从服务器返回给您的 JSON。

【讨论】：

我尝试使用这个插件，但失败了。总有错……不知道为什么……你确定可以在Rails 3.2中使用吗？
任何 js 插件都可以用于任何支持的软件，所有的过程都相同。