JS兼容各个浏览器的本地图片上传即时预览效果

很早以前 在工作曾经碰到这么一个需求，当时也是纠结了很久，也是google了很久，没有碰到合适的demo，今天特意研究了下这方面的的问题，所以也就做了个简单的demo来实现 本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解决图片显示问题。在看代码之前，先让我们来了解以下知识点：

HTML5中的FileReader对象： FileReader对象主要是把文件读入内存中，并且读取文件中数据。目前为止，firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对象。它有以下5种方法：

readBinaryString

readAsText

readAsDataURL 将对象或文件中的数据读取为一串DataURL字符串，就是将数据以一种特殊格式的URL地址形式直接读入页面。

readAsArrayBuffer

abort.

而我们现在要用的是第三种，所以解释了下，其他的具体可以看相关的资料，这里不多解释。

IE：document.selection 即资料解释如下：

selection   对象 代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。
selection   对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。

用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用   select   方法。要获取当前选中区，请对   document   对象应用   selection   关键字。要对选中区执行操作，请先用   createRange   方法从选中区创建一个文本区域对象。
一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。

下面是JSFiddle 中的DEMO链接如下：

想要查看效果，请点击我！

下面是HTML代码如下：

<form enctype="multipart/form-data" name="form1">
<input id="f" type="file" name="f" onchange="change()" />
<div class="upload">上传图片</div>
<p>预览:</p>
<p>
<img id="preview" alt="" name="pic" />
</p>
</form>

JS代码如下：

function change() {
var pic = document.getElementById("preview"),
file = document.getElementById("f");

var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();

// gif在IE浏览器暂时无法显示
if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
alert("图片的格式必须为png或者jpg或者jpeg格式！");
return;
}
var isIE = navigator.userAgent.match(/MSIE/)!= null,
isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

if(isIE) {
file.select();
var reallocalpath = document.selection.createRange().text;

// IE6浏览器设置img的src为本地路径可以直接显示图片
if (isIE6) {
pic.src = reallocalpath;
}else {
// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
}else {
html5Reader(file);
}
}
//本地图片转换成可预览的base64编码,this.result就是base64编码
function html5Reader(file){
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("preview");
pic.src=this.result;
}
}

本地Demo下载

PS:补充

1.html中 标签的 enctype 属性

定义和用法

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

默认地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。



2.JavaScript substring() 方法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

stringObject.substring(start,stop)

substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。

3.base64:URL背景图片与web页面性能优化

background-image图片，我们也可以使用base64编码进行传输

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

如何获得图片的base64编码

本地图片转换成可预览的base64编码的核心脚本

var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
// 这里e.target.result就是base64编码
htmlImage = '<img src="'+ e.target.result +'" />';
}
reader.readAsDataURL(file);

对于我们前端制作，下面这个本地图片 base64编码获取页面是值得推荐的：base64编码工具Encode Data URL By PuterJam

使用base64:URL的优缺点

好处在于：

1. 减少了HTTP请求

2. 某些文件可以避免跨域的问题

3. 没有图片更新要重新上传，还要清理缓存的问题

不足在于：

1.浏览器支持

使用base64编码图片作为背景图片的这种技术IE6/IE7浏览 器是不支持的（IE9浏览器IE7模式下支持）。对于目前PC页面，兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。

2.增加了CSS文件的尺寸

base64编码图片本质上是将图片的二进制大小以一些字母的形式展示，例如一个1024字节的图片，base64编码后至少1024个字符，这个大小会被完全嵌入到CSS文件中（不过幸运的是也可以被gzip了，而图片文件被gzip效果不明显）。

3.编码成本

图片完成后还需要base64编码，目前估计手工完成的多，因此，增加了一定的工作量，虽然不多。

base64:URL图片的实际应用

对于一些级小尺寸图片，所谓增加CSS文件大小的不足可以忽略（再考虑到gzip），同时减少了1个HTTP请求，加上这个图片网站很多地方使用，因此，累积节约的HTTP请求就很惊人了。对于IE6~IE7浏览器不能享受到这种“百利仅一害”的优化技术

base64 URL虚点背景demo