msgbartop
PHP语言, PHP扩展, Zend引擎相关的研究,技术,新闻分享 – 左手代码 右手诗
msgbarbottom

06 May 09 图片上传即时显示缩略图解决方法


做互联网, 就一定要多用新的互联网产品, 遇到好玩的, 要主动去思考如何实现, 这样才能一直保证你自己的良好的互联网应用的sense. 嘿嘿, 题外话一句.

昨天玩开心网的图片上传, 不得不说, 开心网的细节做的很好.

之前在前公司的时候, 高管干扰UE, 干涉产品的设计细节, 出来的产品, 一个比一个难看, 一个比一个土鳖. 搞得开发都不想做, 以至于一段时间, 我们开发工程师会去修缮UE设计的细节.

真不明白, 没有一点互联网应用美感和sense的”猪头”高管, 怎么会对自己的”审美”那么的自信…. 玩死自己没关系 , 玩死了公司, 你内疚不? 唉, 题外话二.. 细节决定成败!

恩, 回到正题, 看到了开心网的, 本地客户端检测图片格式, 和即时显示缩略图功能, 发现在chrome, firefox3, IE8下都不能显示缩略图, 可是我可爱的Eve一直坚持是可以的, 经过研究测试, 找到了在firefox3 , IE8下可以使用的方法.

效果如下:

一个独立的例子,看这里

   PS: chrome是webkit核心, 如果大家谁知道对于Webkit核心的浏览器, 如何获得file input的full path的方法, 一定告诉我.

   另外, IE8还和一个安全设置有关系"文件上传的时候是否告诉服务器文件路径", 如果大家有更好的办法, 也一并告诉我.

Firefox3不支持通过value来获取文件全路径, FireFox3中引入了一个新的接口用来解决这个问题,那就是nsIDOMFile,它专门被用来从客户端的input type=”file”的控件中获取文件数据,这样就可以将本地的文件保存到服务器上。这是一个非常好的解决办法,以至于我们在FireFox3中开发这样的应用程序时比先前简单获取value值然后再通过服务器端代码上传文件要简单许多,

具体可以参看这里: nsiDOMFile


分享到:



Random Posts:

Tags:

28 Responses to “图片上传即时显示缩略图解决方法”

  1. zyx |

    可以用Html5实现

  2. 雷神 |

    经过验证此文章中的代码在chrome 10.0.648.6版本中失效。chrome这点比其他浏览器安全点

  3. Channel Magnets |

    悬吊Channel Magnets地球仪 眼界超越局限尽在掌握,悬吊磁铁地球仪,仅仅是材质的变化,Sensors Magnets就把地球仪的呆板一扫而空;深灰的金属色,富有时尚触觉。 Other Magnetic Assembly它可以通过磁铁吸附,挂在墙上成为立体的球型壁画,悬吊在天花板上作为装饰,或者只是简单摆放在桌上。美白重要的是,无论何时何地;桃皮绒销量不减 ,寒意日渐袭人,这一季适用于制作成夹克衫、Nike air max、休闲装的面料在市场上销量一直是相当不错,商家忙碌着向工厂下订单、puma shoes做货样、催出货。cheap handbags无论是内销订单,还是外贸订货,护肤桃皮绒在近期的盛泽市场上有其一定的地位,尤其深受东欧地区的客商喜欢。

  4. wclssdn |

    我是IE8 … 难道不支持ie8?

    我也实现过类似的.. 不过也是上传后.. 返回地址.. 显示缩略图的…

    但是不会存在垃圾文件.. 我存了个标志在session中.. 呵呵..

    希望早日找到更更好的办法..

  5. Anonymous |

    佩服,现学现用了,希望作者不要介意。

  6. zhj |

    那我拜你为师吧~~以后有机会一定请你喝酒~~二锅头

  7. 雪候鸟 |

    你可以选择请我吃饭, 或者请我喝酒, 嘿嘿

  8. zhj |

    额的神啊~~该怎么感谢你啊~~

  9. 雪候鸟 |

    恩,IE下有个安全选项问题…

  10. Anonymous |

    IE7下图片只显示路径,不显示图片

  11. 雪候鸟 |

    你再仔细看看? 呵呵

  12. Jessica |

    像我这种用户点完预览就就提交了..不知道你JS给服务器提交到一半怎么处理..我想的只有加重服务器负担.

  13. Jessica |

    汗..说了这么多不就是一句
    document.getElementById(‘file’).value

  14. flykobe |

    原来用的是data url!
    以前一直看图片预览,都没弄明白!多谢多谢!

  15. 雪候鸟 |

    恩, 这个方法比较狠..

  16. weimade |

    以前我们公司弄了一个好玩的办法..

    当用户选择图片之后,直接用JS就把图片给传到服务器上了.
    然后就不管他什么浏览器了.

    所谓的预览,就成功了.

  17. 雪候鸟 |

    不反对,点都不反对。。。呵呵

  18. 就天鹰 |

    不错,一直找不到支持ff的方法
    转载一下,不反对吧,谢谢

  19. 雪候鸟 |

    也就是IE8麻烦…

  20. WIllko |

    我把兼容ie6/7系列的代码写在了这http://willko.javaeye.com/admin/blogs/381684

    希望继续探讨

  21. ... |

    http://www.cnblogs.com/jaxu/archive/2009/04/21/1439016.html

  22. gently |

    老外们讨论的结果似乎是通过flash桥接来解决兼容问题。一如Gmail的实时提示附件太大。

  23. 图片上传即时显示缩略图解决方法(支持firefox3和ie8) 网站系统架构网摘 - 系统 架构 服务器 优化 网站 |

    [...] from:http://www.laruence.com/2009/05/06/758.html Facebook 如何管理150亿张照片 [...]

  24. 雪候鸟 |

    哦,手误,
    恩, 用activeX来专门处理IE series, 那是肯定可以的.

  25. Anders |

    some code is invalid.
    widht = container.widht;

    恩,不错。

    支付宝的,我猜可能是控件。

  26. dyh1919 |

    记得支付宝里有一个上传身份证的看缩略图,估计兼容性是做到的了,可以试着扣出来

  27. 雪候鸟 |

    chrome是webkit核心的,,目前还没有找到方法怎么获取文件全路径.
    另外,IE8还和安全级别设置有关系..

  28. Willko |

    真是及时雨啊。。。
    不知道有没有兼容性更强的呢?

Leave a Reply

*