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

Question

我想使用类似

的内容上传图片

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

表单没有提交按钮，我创建一个div来替换它：

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

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

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

以下是我的问题：

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

   我尝试使用$ .post，但是$（“＃upload”）。val（）只返回文件路径，没有内容。

2. 我的想法是实现目标，是否有效？

   （1）将函数绑定到$（“＃submit”）。单击，将文件发布到控制器

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

   （3）将函数定义为$ .post的回调，其中将某些src设置为url

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

   谢谢!!

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。