文章地址：http://www.cnblogs.com/rubylouvre/p/4597344.html

一、window.URL

  • 在Chrome中，window.URL和window.webkitURL都存在
  • 在Firefox中，仅Window.URL存在
  • 在IE11（Edge），10中仅window.URL存在
  • 在IE7、8、9中不存在window.URL
  • 在IE中能通过FileObject 的value 属性获取文件全路径
  • 在Chrome中无法获取FileObject的全路径，得到的是一个假路径
  • 在Firefox中根本获取不到路径，得到的是一个文件名
  • 在IE7、8、9中无法获取到FileObject的files属性
  • window.URL中的方法

二、上传过程使用滤镜预览图片

一般在网页（JSP或HTML）中要显示图片，我们可以用src=xxxx的路径的方式去显示，但是在web应用中，这是无效的，因为src后跟的是文件路径，如果是单单一个页面是没问题，如果是项目工程中的话，就必须是在该项目下的路径，这样如果是上传的图片就显示不了。因此我们可以用src后跟流的方式显示图片，或者使用滤镜

前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome(学习到的知识)的更多相关文章

  1. FileReader与URL.createObjectURL实现图片、视频上传前预览

    之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...

  2. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  3. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  5. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  6. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  7. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  9. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  10. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

随机推荐

  1. wordpress主题制作常用基本的模板及说明

    style.css : CSS(样式表)文件,一般包括主题声明和通用css样式代码 index.php : 主页模板,一般用来做网站的首页 header.php : Header模板,一般是所有页面的 ...

  2. HDU2088JAVA

    Hot~~招聘——巴卡斯(杭州),亚信科技,壹晨仟阳(杭州) Box of Bricks Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: ...

  3. JavaScript的DOM操作（三）

    1.相关元素操作: var a = document.getElementById("id"); var b = a.nextSibling,找a的下一个同辈元素,注意空格 var ...

  4. U3D 摄像机镜头控制

    如果要实现,摄像机跟随着主角运动,还有运用滚轮实现镜头的方法和缩小的实现原理 方法1:把主摄像机放到主角的下面,作为一个子对象,调整好摄像机的视角,此时就会跟随了. 方法2:用代码让摄像机的相关的po ...

  5. Oracle 检验身份证是否正确的存储过程

    ) ) ); ); ); ); ); ); ); ; , , , , , , , , , , , , , , , , , ); ;  , ) );  ..  loop )) ) ); , )), ), ...

  6. iOS开发进阶--1.多线程简介

    学习是由已知的知识模型推理未知的知识模型的的过程. 本文适合学习完objective-c基础,想进一步提高做iOS开发的同学阅读. 在说线程的时候,我们先看看进程. 1.进程 每一个运行在系统中的应用 ...

  7. LINQ 101——约束、投影、排序

    什么是LINQ:LINQ 是一组 .NET Framework 扩展模块集合,内含语言集成查询.集合以及转换操作.它使用查询的本机语言语法来扩展 C# 和 Visual Basic,并提供利用这些功能 ...

  8. (正则表达式应用) 替换自闭合标签（self-closing tag）的method

    var str = "<sup><div class=\"he's\"/></sup><span id=\"cs\&q ...

  9. Java虚拟机类加载初始化解析

    Classloader的作用,概括来说就是将编译后的class装载.加载到机器内存中,为了以后的程序的执行提供前提条件. 一段程序引发的思考: 风中叶老师在他的视频中给了我们一段程序,号称是世界上所有 ...

  10. Eclipse开发android安装环境

    好久没有用Eclipse开发android了,今天安装了一下,发现之前的andorid的sdk不能用了,然后去官网下载了一个最新的SDK,由于现在的android的官网需要FQ才能访问到,所以在这里我 ...