dongluo3331
2012-06-20 21:15
浏览 71
已采纳

Facebook样式图像上传与缩略图生成

Okay, I know questions like this exist in multiple forms across StackOverflow and other places on the web, but none of them is pointing me to what I actually need (maybe I missed a question that was more catered to my problem).

I need a Facebook-style image upload mechanism, using Codeigniter and javascript/jquery. Here's what it's supposed to do -

  1. Using a single file upload control (or for that matter any clickable control), open up the "Choose Files" dialog window, and allow the user to select multiple images from it. (I know this cannot yet be done in IE, and I do not really care about the multiple file selection not working in IE).

  2. Once the user has selected the files, the page should display a series of progress bars (like Facebook does). As each image gets uploaded, the corresponding progress bar reaches 100% (if it's simpler to implement, I am willing to forego the graphical progress bar for a text that displays the progress percentage), and the thumbnail of the image is displayed next to the completed progress bar (or text). At this point, the user should have the option to delete the uploaded image by clicking a cancel button (I think I can get this part working on my own).

  3. The upload can be sequential (like Facebook does), or asynchronous (some upload libraries I found work this way).

  4. What's most important (and the part that is stumping me) is the thumbnail generation. I know that there's some HTML5/CSS3 technique that allows you to display the thumbnail before the files have actually been uploaded, pulling them directly from the user's hard drive. But that won't work in IE8, and while I am not concerned about the multiple image selection not working in IE8, I need for the thumbnail generation to work cross-browser, and that includes IE8 (deciding on the browser compatibility is not something I can command, so please don't come up with a "screw IE!" solution).

I have tried using uploadify (I have no constraints against using Flash), but cannot seem to able to customize it to my needs. While uploadify does indeed display progress bars, I was unable to find a way to generate (and display) thumbnails on the fly, in accordance with the behavior I described above. I know how thumbnail generation works on PHP, just cannot figure out how to implement this together with the progress indicators. Am I looking for a suitable jQuery/ajax call?

Any help and/or pointers would be appreciated. I admit that I might have missed a StackOverflow question that would solve my issue, so please direct me to that page, or to any other page you believe will help me. Please feel free to suggest upload libraries other than uploadify, which you believe I might find useful.

Thanks in advance. And thanks for reading through all this - I tried my best to make the question properly descriptive!

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • drvxnivoqf17568697 2012-06-21 12:41
    已采纳

    I have used Jquery file upload with good results. It does need IE to be in compatibility mode, but worked well for chrome/firefox.

    UPDATE. It now claims to support IE 6.0+.

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • dongreng9864 2012-06-20 21:42

    I'll focus on point 4 here. It can be done, but you'll end up using iframes (yeah, I now). They can be 1px small, but you'll need them if you want to create thumbnail previews. A good starting point would be here: http://www.zurb.com/playground/ajax_upload

    As for creating the actual preview images (smaller versions) you can use CI's image library. Let me know how it works out.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题