文章地址: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. 【转】java 解析 plist文件

    为了方便的将spritesheet的图导入我自己的动画编辑器!我做了plist文件解析DOM解析比较麻烦 因为element getChildNodes 会获取到text对象.而这个对象可能是一个空白 ...

  2. LCD深度剖析

    LCD 深度剖析 来源:http://blog.csdn.net/hardy_2009/article/details/6922900 http://blog.csdn.net/jaylondon/a ...

  3. HighCharts基本使用实例(入门)

    HighCharts 摘要 HighCharts是眼下最为流行的图表插件,应用范围广泛,眼下支持曲线图.区域图.3D图.柱状图.饼图.散列图.混合图等,而且还支持一些拓展的特殊图表,如:仪表图.极地图 ...

  4. FontCombobox 和FontSizeCombobox

    附件:http://files.cnblogs.com/xe2011/WindowsFormsFontCombox.rar 自定义组件字体组合框 自定义组件字体组合框如何使用 自定义组件字体大小组合框 ...

  5. FASTDFS 5X安装

    FASTDFS 5X安装 http://www.wingdevops.com/?p=603 流行的开源分布式文件系统有很多,FastDFS 是国人在mogileFS的基础上进行改进的key-value ...

  6. Oracle笔记-表的管理

    3.1创建和管理表在Oracle表中使用的emp,dept,sal都是系统内建好的表,那么在SQL语法中同样支持了表的创建语句,要想创建表,则应先了解下Oracle中最常用的几种数据类型3.1.1常用 ...

  7. idea集成svn插件

    1.需要在机器上安装一个SVN客户端命令行程序,可以到这里下载对应的安装程序:http://subversion.apache.org/packages.html#windows 我选择的是torto ...

  8. php 的一个pg_fetch_assoc的怪问题

    遇到过一种问题 . if($row=pg_fetch_assoc($result)){ while($row=pg_fetch_assoc($result)){ echo '3333'; $koCd ...

  9. MVC 中的Areas支持

    在ASP.NET MVC 2中对于Area功能的增强,这样的增强是如何在同一个项目中更好地组织应用程序的? ASP.NET MVC 1.0时,如果我们要在一个项目中做自己网站的后台应用,而又保持URL ...

  10. Js 上传文件 页面不刷新

    html控件代码: <form id="form1"> <p><input type="file" name="mfil ...