前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)
文章地址: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(学习到的知识)的更多相关文章
- FileReader与URL.createObjectURL实现图片、视频上传前预览
之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...
- hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- HTML5 FileReader实现图片上传前预览
如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...
随机推荐
- 在Windows下使用MinGW静态编译Assimp
使用MinGW静态编译Assimp 到了5月份了,没有写一篇日志,于是自己从知识库里面拿出一篇文章充数吧.这次将要解说怎样在Windows下使用MinGW静态编译Assimp. Assimp是眼下比較 ...
- 知名IT企业待遇一览表
115家IT公司待遇一览表 作者是西电通院2013届毕业硕士,依据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇例如以下,吐血奉献,公司比較全.下面绝对是各大公司2013届校招的数 ...
- TCP/IP 编程
http://www.cnblogs.com/ggjucheng/archive/2012/08/18/2645324.html
- SourceTree - 好用的 Git / Mercurial GUI 管理工具 for Mac OS X
Git 是免費.開放源碼的分散式版本控制系統,從小專案到非常大的專案,都可以很快速.有效地管理. 對程式設計師來說,一定要熟記 git 指令的用法,在終端機下操作 git 是必備的基本技能.(其他的 ...
- DataGrid缓冲加载数据
当datagrid的滚动条拉到4/3的时候去加载数据.. public MainWindow() { InitializeComponent(); ; i <= ; i++) { Class1 ...
- 项目打包 weblogic部署
工作流打包: 由于没有集成单点,配置文件要修改 将webnocas.xml内容复制覆盖 web.xml 到这里修改完毕 选择weblogic项目,右键maven install,生成.ear文 ...
- 【转】Angular Input格式化
今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo. ...
- window.resizeTo()和window.open()
函数:window.resizeTo(width, height) 作用:改变窗口大小到设定的宽和高 参数:width - 宽度像素,必须设定的参数 height - 高度像素,可 ...
- [条形码] BarCodeToHTML条码生成类 (转载)
点击下载 BarCodeToHTML.zip 过多的我就不多说了大家直接看代码吧,这是一个帮助大家生成条码的类,大小大家可以自由的设定 /// <summary> /// 类说明:条码生成 ...
- SVN配置使用
文档规则 [本地工作区] :work copy ,本地工作副本: [主项目]:引用共用模块的新项目(工程) 最新版本(HEAD revision):版本库里文件或目录的最新版本 SA :SVN服务器的 ...