前端图片预览,上传前预览,兼容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 ...
随机推荐
- 显示、隐藏 PowerShell
以下是一个快速实现该需求的 module.只要将以下代码复制粘贴到 Documents\WindowsPowerShell\Packages\PowerShell\PowerShell.psm1 即可 ...
- 【Java】通过DES加密和解密工具,对字符串进行加密和解密操作
分享一个非常不错的字符串加密和解密的程序. 可以指定不同的密钥对同一字符串进行不同的加密操作,增强加密性能. Java代码如下: package com.app; import java.securi ...
- android 60 发送短信
import android.os.Bundle; import android.app.Activity; import android.telephony.SmsManager; import a ...
- PureMVC(JS版)源码解析(九):View类
在讲解View类之前,我们先回顾一下PureMVC的模块划分: 在PureMVC中M.V.C三部分由三个单例类管理,分别是Model/View/Controller.PureMVC中另外一个 ...
- Unity3D获取当前键盘按键
获取当前键盘按键,代码如下: using UnityEngine; using System.Collections; public class GetCurrentKey : MonoBehavio ...
- js 连续赋值
无意中网上发现的这个问题,预想的结果和真实的结果大相径庭. var a={n:1} var b=a; a.x=a={n:2} console.log(a.x); console.log(b.x); u ...
- 关于自己的ES6使用姿势
ES6今年开始学的,从看文档到实践,以下是自己使用过的一些ES6的东西: 1:for-of 语法: 最喜欢的还是它支持了break/continue的语法,而且还修改了for-in的缺陷,简要写法: ...
- J2EE入门必备
1,J2EE是什么 J2EE(Java 2 platform Enterprise Edition)是软件平台,适于创建服务器端的大型应用软件和服务系统. J2EE适合开发大规模的业务系统,这种级别的 ...
- PHP制作简单的日历
在这里分享一个PHP制作的日历 <?php //万年历if($_GET['year']){$year = $_GET['year'];}else{$year = date("Y&quo ...
- SSO单点登录之数据同步
完成单点登录,我们便可以通过只登录一个账号,来访问不同系统,然而会遇到以下问题. 1. 通过A站登录的用户访问B站,在B站并没有真实用户,此时如果在B站新建用户,则可能造成用户信息不全,或者数据冲突等 ...