如何上传图片并使用jQuery和Rails不刷新显示它？

Question

我要上传图片使用类似

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

形式没有一个提交按钮，我做一个div来替换它：

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

我希望，当点击div时，图像将被上传，然后在另一个img中显示而不刷新。

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

以下是我的问题：

1. 如何发布上传文件到控制器

   我试着使用$。员额，但$（ “＃上传”）VAL（）只返回文件路径，没有内容。

2. 这是我的想法，实现我的目标，它可以工作吗？

   （1）功能绑定到$（ “＃提交”）。点击，上传文件到控制器

   （2）控制器保存在/公共文件夹中的文件，使文件的URL

   （3）定义一个函数在其中设置一些在URL中的SRC的.post的$回调

   如果我的想法有任何问题，请告诉我一个正确的方式...

   谢谢！

Answer 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从服务器返回给你。