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下图片只显示路径,不显示图片

    • 雪候鸟
      雪候鸟 May 22, 2009

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

  10. Jessica
    Jessica May 18, 2009

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

    • 雪候鸟
      雪候鸟 May 18, 2009

      你再仔细看看? 呵呵

  11. flykobe
    flykobe May 14, 2009

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

  12. weimade
    weimade May 12, 2009

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

    • 雪候鸟
      雪候鸟 May 12, 2009

      恩, 这个方法比较狠..

    • 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
        希望继续探讨

        • 雪候鸟
          雪候鸟 May 7, 2009

          也就是IE8麻烦…

Comments are closed.