文章地址：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. EasyUI-页面布局

    通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用 'add' 方法即可. 在本教程中,我们将使用 iframe 动态地添加显示在一个页面上的 Tabs. 当点击添加按钮, ...

  2. 通过源码看android系列之AsyncTask

    整天用AsyncTask,但它的内部原理一直没有特意去研究,今天趁着有时间,码下它的原理. 具体用法就不再说明,相信大家已经用得很熟练了,我们今天就从它怎么运行开始说.先新建好我们的AsyncTask ...

  3. Linux系统下UDP发送和接收广播消息小样例

    [cpp] view plaincopy // 发送端 #include <iostream> #include <stdio.h> #include <sys/sock ...

  4. SonarQube代码质量管理平台安装与使用--转载

    原文:http://blog.csdn.net/hunterno4/article/details/11687269 Sonar简介 Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量, ...

  5. WPF自定义窗体仿新毒霸关闭特效（只能在自定义窗体中正常使用）

    比较简单的一个小功能,和新毒霸类似的效果. 效果代码: bool closeStoryBoardCompleted = false; DoubleAnimation closeAnimation1; ...

  6. Linux下安装GAMS建模优化工具

    1.下载GAMS wget http://d37drm4t2jghv5.cloudfront.net/distributions/24.5.6/linux/linux_x64_64_sfx.exe 2 ...

  7. String类比较，String类运算比较，String运算

    String类比较,String类运算比较 >>>>>>>>>>>>>>>>>>>&g ...

  8. javascript的面向对象编程

    面象对象编程技术的核心理念:封装.继承.多态:在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接 ...

  9. 排序算法（冒泡，选择，快速）Java 实现

    冒泡 排序: public static void Bubblesort(int [] a) { for(int x=0;x<=a.length-1;x++) { for(int y=0;y&l ...

  10. 枚举N行N列的自然数列

    数据库环境:SQL SERVER 2005 现有一个需求,要枚举1-50个自然数,分10行5列展示.如图,