帶縮略圖生成的Facebook風格圖片上傳

好吧，我知道像StackOverflow和網絡上其他地方存在多種形式的問題，但他們中沒有人指出我實際需要的東西（也許我錯過了一個問題，那就是更迎合我的問題）。帶縮略圖生成的Facebook風格圖片上傳

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

使用單文件上傳控件（或任何爲此事點擊控制），打開「選擇文件」對話框，並允許用戶選擇多個圖片從中。（我知道這還不能在IE中完成，並且我並不在意IE中的多個文件選擇無效）。
一旦用戶選擇了文件，頁面應該會顯示一系列進度條（如Facebook）。當每張圖片上傳時，相應的進度條達到100％（如果實現起來更簡單，我願意放棄顯示進度百分比的文本的圖形進度條），圖片的縮略圖顯示在完成進度條（或文本）。此時，用戶應該可以選擇通過單擊取消按鈕來刪除上傳的圖像（我認爲我可以自己完成這部分工作）。
上傳可以是順序的（比如Facebook），也可以是異步的（我發現某些上傳庫以這種方式工作）。
什麼是最重要的（以及困擾我的部分）是縮略圖生成。我知道有一些HTML5/CSS3技術，允許您在之前顯示縮略圖，這些文件實際上傳過後，直接從用戶的硬盤中提取。但是這在IE8中不起作用，雖然我不擔心在IE8中不能使用多個圖像選擇，但我需要縮略圖生成工作以跨瀏覽器工作，其中包括IE8（確定瀏覽器兼容性不是問題我可以命令，所以請不要拿出一個「螺絲IE！」解決方案）。

我試過使用uploadify（我沒有使用Flash的限制），但似乎無法自定義它以滿足我的需求。雖然uploadify確實顯示進度條，但我無法找到一種方法根據上述行爲生成（並顯示）動態縮略圖。我知道縮略圖生成如何在PHP上工作，但無法弄清楚如何與進度指示器一起實現。我在尋找合適的jQuery/ajax調用嗎？

任何幫助和/或指針，將不勝感激。我承認我可能錯過了一個可以解決我的問題的StackOverflow問題，所以請將我引導到該頁面或其他您認爲可以幫助我的頁面。請隨意建議上傳uploadify以外的庫，這相信我可能會覺得有用。

在此先感謝。感謝您閱讀所有這些內容 - 我盡我所能使問題具有正確的描述性！

來源

2012-06-20 Debadeep Sen

您是否遇到過SWFUpload插件？請參閱文檔http://code.google.com/p/swfupload/ –

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

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

來源

2012-06-20 21:42:52 Robert

我沒有檢查ajax_upload。但是，這不顯示進度條;它只顯示一個微調按鈕（我希望用戶能夠指出已經完成了多少上傳，這就是我傾向於實施進度條的原因）。至於CI的圖片庫，是的，它可以生成縮略圖，但我的問題是 - 我怎麼知道上傳何時完成，以便我可以從服務器獲取文件？ –

另外，ajax_upload似乎一次集中在上傳單個文件。 –

當然，但是既然你提到了第4點是最重要的，任何幫助或指針都會被評價，所以我想我分享我擁有的東西。 – Robert

我已經使用了Jquery file upload，效果很好。它確實需要IE瀏覽器處於兼容模式，但在Chrome/Firefox中運行良好。

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

來源

2012-06-21 12:41:33

帶縮略圖生成的Facebook風格圖片上傳

回答

相關問題