网页上传图片时，直接本地预览无需上传服务器

最近在做一个项目时遇到上图片需要预览功能，在做的时候我们在 服务器url预览 和 本地直接预览 两种方式中做了选择，最后敲定使用本地直接预览。原因是如果等到上传完毕之后再返回图片URL给用户预览，一旦网络比较慢，用户就得等好久才能预览，而且每次更换图片都会上传到服务器会产生很多垃圾图，考虑这些，不妨直接在本地预览，既快捷又节省带宽和存储空间。

    但是在做的过程中遇到在google浏览器里面预览出错，最后找了很久终于找到了解决的方法。兼容 IE、google、firfox、safari浏览器。具体做法如下面代码详情

<input id="upload" type="file" οnchange="localShowImage();">
<img id="preview" src="">

<script type="text/javascript"> 
// 得到浏览器版本
function getOs()  
{  
   var OsObject = "";  
   if(navigator.userAgent.indexOf("MSIE")>0) {  
        return "MSIE";  
   }  
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){  
        return "Firefox";  
   }  
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {  
        return "Safari";  
   }   
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){  
        return "Camino";  
   }  
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){  
        return "Gecko";  
   }
}  

function localShowImage() {
	// IE浏览器获取图片路径
	this.getImgUrlByMSIE = function(fileid) {
		return document.getElementById(fileid).value;
	}
	// 非IE浏览器获取图片路径
	this.getImgUrlByUnMSIE = function(fileid) {
		var f = document.getElementById(fileid).files[0];
		return window.URL.createObjectURL(f);
	}
	var imgsrc="";
	var fid = "upload";
	if("MSIE"==getOs()) {
		imgsrc = this.getImgUrlByMSIE(fid);
	} else {
		imgsrc = this.getImgUrlByUnMSIE(fid);
	}

	document.getElementById('preview').src = imgsrc;
}

这里由于google浏览器里面使用 document.getElementById(fileid).value 得到的地址是并不是我们本地的地址，所以在google浏览器里面取得图片对象须要使用File对象、 Blob对象和window.URL.createObjectURL()方法来得到图片地址。

File对象

File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

下面来看获取FileList对象：

document.getElementById(fileid).files[0]

 

Blob对象

一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.

我们想要得到的对象URL实际上就是从Blob这个对象获取的，因为File的接口继承Blob。下面就来把Blob对象转换成URL：

var f = document.getElementById(fileid).files[0];
var src= window.URL.createObjectURL(f);

后记：

• 网上查看资料有直接使用File对象的getAsDataURL()方法获取URL的，现在这个方法都已经废除，类似的还有getAsText()和getAsBinary()方法；（没有具体测试）
• 这样就可以在前端做图片的大小、尺寸上传前验证，无须提交服务器