如何使用Rails和jQuery實現圖像預覽？

Question

最近幾天，我在網站上提交表單提交功能之前，閱讀了各種實現“圖像預覽”的方法。

我使用HTML5使其在某些瀏覽器上成功運行，但在所有瀏覽器上均未成功。 這似乎很麻煩，所以我決定最好的方法是將用戶選擇的圖像自動上傳到服務器上的臨時文件夾，以便以后可以顯示給他們。

細節

此圖像是微帖的一部分。

• 用戶單擊微信文本區域，它將展開並顯示給他們一個攝像機圖像，他們可以單擊以選擇圖像。

• 成功選擇之后，我將使用JQuery的trigger方法觸發提交將文件上傳到temp文件夾的小型表單的提交。

• 這將允許我在上傳進行時顯示進度條，然后將圖像顯示給用戶。 它將在所有瀏覽器上運行。

• 然后，如果用戶認為圖像很好，他們將繼續填寫微博表格文本區域並單擊發布。

• 單擊帖子后，臨時圖像將被移動到其永久位置，並且路徑將被更新。

我正在使用載波進行圖像上傳。

在我的微博表格中，我有一個image列，其中包含圖像的路徑。

這是我有點困惑的地方。 我將需要一些如何在單擊微博帖子按鈕時獲取圖像的路徑的信息，以便可以將其存儲在微博表中，但是該路徑將是不再使用的臨時路徑，因為該圖像將搬到了它的永久道路。

對於執行此操作的直接方法，我真的非常感謝。 如果網絡瀏覽器非常像汽車（例如4輪，方向盤，窗戶，汽油，柴油），那么網絡世界將大為不同。

Answer 1

您應該使用此jQuery插件上傳圖片： http : //blueimp.github.com/jQuery-File-Upload/

它支持您所需要的內容，並且默認使用舊的和笨拙的瀏覽器的有效解決方案（例如iframe）。

請享用！

Answer 2

我認為，如果您只需要在上傳之前以表單的形式進行圖像預覽，您（和我一樣）就會看到JQuery Upload插件太復雜了，不太容易正確運行（我能夠看到預覽，但是后來無法上傳圖片，因為它與您的表單弄亂了）。 我花了太多時間放棄了。

然后，更深入地（查找），我找到了以下解決方案：

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

編寫起來非常簡單快捷。