前端图片预览,上传前预览,兼容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 ...
随机推荐
- PowerDesigner跟表的字段加注释
选择那个表 右键- >Properties- >Columns- >Customize Columns and Filter(或直接用快捷键Ctrl+U)- >Comment( ...
- poj 1149 Pigs 网络流-最大流 建图的题目(明天更新)-已更新
题目大意:是有M个猪圈,N个顾客,顾客要买猪,神奇的是顾客有一些猪圈的钥匙而主人MIRKO却没有钥匙,多么神奇?顾客可以在打开的猪圈购买任意数量的猪,只要猪圈里有足够数量的猪.而且当顾客打开猪圈后mi ...
- Kia's Calculation(贪心)
pid=4726">http://acm.hdu.edu.cn/showproblem.php? pid=4726 大致题意:给两个长度小于10^6且相等的合法的正整数.你能够随意组合 ...
- LabVIEW设计模式系列——资源关闭后错误处理
标准: 1.很多引用资源其打开函数和关闭函数对错误处理的方式有所不同:2.一般地NI的Help里对打开函数的错误端子的解释是这样的:如错误发生在VI或函数运行之前,VI或函数将把错误输入值传递至错误输 ...
- Cocos2d-x中常用粒子编辑器ParticleDesigner测试例子
打开 ParticleDesigner 随意选择一种效果 选择save. 类型选择 cocosd(plist)类型保存至桌面 命名为myplist导出至桌面 选择右侧Emitter Config可设置 ...
- JAVA格式化时间日期
JAVA格式化时间日期 import java.util.Date; import java.text.DateFormat; /** * 格式化时间类 * DateFormat.FULL = 0 * ...
- update inner join
string sql = @"update a set a.M_ParentID=b.M_ParentID, a.M_Name=b.M_Name, a.M_Seq=b.M_Seq from ...
- width:100% 和 max-width:100%; 有区别吗【转藏】
这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...
- mybatis中几种typeHandler的定义使用
1.存储到数据库, 将LONG数组转换成字符串;从数据库获取数据, 将字符串转为LONG数组 package com.winturn.utils.handler; import java.sql.Ca ...
- MES项目中出现的一个事务嵌套的使用场景
昨天在MES项目中,需要在业务逻辑的几个关键点记录错误信息,需要把错误信息写入数据表. 但是由于整个业务逻辑都是包在一个事务模板里面的 比如这样的: WhhTransactionTemplate tr ...