Facebook樣式圖像上傳與縮略圖生成

Question

好吧，我知道這樣的問題在StackOverflow和網絡上的其他地方以多種形式存在，但它們都沒有指向我實際需要的東西（也許我錯過了一個更能滿足我的問題的問題）。

我需要一個Facebook風格的圖像上傳機制，使用Codeigniter和javascript / jquery。 這是它應該做的 -

1. 使用單個文件上傳控件（或任何可點擊的控件），打開“選擇文件”對話框窗口，並允許用戶從中選擇多個圖像。 （我知道這還不能在IE中完成，我真的不關心多個文件選擇在IE中不起作用）。

2. 一旦用戶選擇了文件，頁面就會顯示一系列進度條（就像Facebook一樣）。 當每個圖像上傳時，相應的進度條達到100％（如果它更容易實現，我願意放棄顯示進度百分比的文本的圖形進度條），並且圖像的縮略圖顯示在旁邊完成進度條（或文本）。 此時，用戶應該可以通過單擊取消按鈕來刪除上傳的圖像（我想我可以自己動手）。

3. 上傳可以是順序的（如Facebook一樣），也可以是異步的（我發現這樣的一些上傳庫）。

4. 最重要的是（以及困擾我的部分）是縮略圖生成。 我知道有一些HTML5 / CSS3技術允許您在文件實際上傳之前顯示縮略圖，直接從用戶的硬盤驅動器中提取它們。 但是這在IE8中不起作用，雖然我並不關心多個圖像選擇在IE8中不起作用，但我需要縮略圖生成才能跨瀏覽器工作，包括IE8（決定瀏覽器兼容性不是什么東西）我可以命令，所以請不要提出“螺絲IE！”解決方案）。

我嘗試過使用uploadify（我沒有使用Flash的限制），但似乎無法根據我的需要自定義它。 雖然uploadify確實顯示了進度條，但根據我上面描述的行為，我無法在運行中找到生成（和顯示）縮略圖的方法。 我知道縮略圖生成如何在PHP上工作，只是無法弄清楚如何與進度指標一起實現它。 我在尋找合適的jQuery / ajax電話嗎？

任何幫助和/或指針將不勝感激。 我承認我可能錯過了可以解決我的問題的StackOverflow問題，因此請將我引導至該頁面，或者您認為可以幫助我的任何其他頁面。 請隨時建議上傳除uploadify之外的庫，您認為我認為這些庫很有用。

提前致謝。 感謝閱讀所有這些 - 我盡力使問題正確描述！

Answer 1

我使用了Jquery文件上傳效果很好。 它確實需要IE處於兼容模式，但適用於chrome / firefox。

UPDATE。 它現在聲稱支持IE 6.0+。

Answer 2

我將重點關注第4點。 它可以完成，但你最終會使用iframe（是的，我現在）。 它們可以是1px小，但如果你想創建縮略圖預覽，你將需要它們。 一個很好的起點是： http ： //www.zurb.com/playground/ajax_upload

至於創建實際預覽圖像（較小版本），您可以使用CI的圖像庫。 讓我知道它是如何工作的。