最近在做一个项目时遇到上图片需要预览功能,在做的时候我们在 服务器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()方法;(没有具体测试)
- 这样就可以在前端做图片的大小、尺寸上传前验证,无须提交服务器