Press "Enter" to skip to content

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


做互联网, 就一定要多用新的互联网产品, 遇到好玩的, 要主动去思考如何实现, 这样才能一直保证你自己的良好的互联网应用的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

28 Comments

  1. zyx
    zyx November 15, 2016

    可以用Html5实现

  2. 雷神
    雷神 March 24, 2011

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

  3. Channel Magnets
    Channel Magnets December 10, 2010

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

  4. wclssdn
    wclssdn July 26, 2010

    我是IE8 … 难道不支持ie8?
    我也实现过类似的.. 不过也是上传后.. 返回地址.. 显示缩略图的…
    但是不会存在垃圾文件.. 我存了个标志在session中.. 呵呵..
    希望早日找到更更好的办法..

  5. Anonymous
    Anonymous December 2, 2009

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

  6. zhj
    zhj August 14, 2009

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

  7. 雪候鸟
    雪候鸟 August 13, 2009

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

  8. zhj
    zhj August 13, 2009

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

  9. Anonymous
    Anonymous May 21, 2009

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

  10. Jessica
    Jessica May 18, 2009

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

  11. flykobe
    flykobe May 14, 2009

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

  12. weimade
    weimade May 12, 2009

    以前我们公司弄了一个好玩的办法..
    当用户选择图片之后,直接用JS就把图片给传到服务器上了.
    然后就不管他什么浏览器了.
    所谓的预览,就成功了.

    • Jessica
      Jessica May 18, 2009

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

  13. 就天鹰
    就天鹰 May 8, 2009

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

    • 雪候鸟
      雪候鸟 May 10, 2009

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

  14. Anders
    Anders May 6, 2009

    some code is invalid.
    widht = container.widht;
    恩,不错。
    支付宝的,我猜可能是控件。

    • 雪候鸟
      雪候鸟 May 6, 2009

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

  15. dyh1919
    dyh1919 May 6, 2009

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

  16. Willko
    Willko May 6, 2009

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

    • 雪候鸟
      雪候鸟 May 6, 2009

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

      • gently
        gently May 6, 2009

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

      • WIllko
        WIllko May 7, 2009

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

Leave a Reply

Your email address will not be published. Required fields are marked *