如何上傳圖片並使用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從服務器返回給你。