图片的上传预览功能主要用于图片上传前的一个效果的预览，目前主流的方法主要有js，jquery与flash实现，但我们一般都会使用js来实现图片上传预览功能，下面来看一个例子。
原理:
分为两步：当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的url（对象url）；把对象url赋值给事先写好的img标签的src属性即可把图片显示出来。
在这里，我们需要了解javascript里file对象、blob对象和window.url.createobjecturl()方法。
file对象:
file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,file对象是来自用户在一个input元素上选择文件后返回的filelist对象,也可以是来自由拖放操作生成的 datatransfer对象.
下面来看获取filelist对象：
复制代码 代码如下:
blob对象：
一个blob对象就是一个包含有只读原始数据的类文件对象.blob对象中的数据并不一定得是javascript中的原生形式.file接口基于blob,继承了blob的功能,并且扩展支持了用户计算机上的本地文件.
我们想要得到的对象url实际上就是从blob这个对象获取的，因为file的接口继承blob。下面就来把blob对象转换成url：
复制代码 代码如下:
兼容性：
上述方法适用于chrome浏览器
如果是ie浏览器可以直接使用input的value来代替src
网上查看资料有直接使用file对象的getasdataurl()方法获取url的，现在这个方法都已经废除，类似的还有getastext()和getasbinary()方法,我们来看这样一个例子。
复制代码 代码如下:
function getfullpath(obj) {    //得到图片的完整路径 
    if (obj) { 
//ie 
if (window.navigator.useragent.indexof(msie) >= 1) { 
    obj.select(); 
    return document.selection.createrange().text; 
} 
//firefox 
else if (window.navigator.useragent.indexof(firefox) >= 1) { 
    if (obj.files) { 
return obj.files.item(0).getasdataurl(); 
    } 
    return obj.value; 
} 
return obj.value; 
    } 
}
这段代码是获取客户端图片的完整路径
我们再限制其大小和格式
复制代码 代码如下:
$(#loadfile).change(function () { 
var strsrc = $(#loadfile).val(); 
img = new image(); 
img.src = getfullpath(strsrc); 
//验证上传文件格式是否正确 
var pos = strsrc.lastindexof(.); 
var lastname = strsrc.substring(pos, strsrc.length) 
if (lastname.tolowercase() != .jpg) { 
    alert(您上传的文件类型为 + lastname + ，图片必须为 jpg 类型); 
    return false; 
} 
//验证上传文件宽高比例
if (img.height / img.width > 1.5 || img.height / img.width     alert(您上传的图片比例超出范围，宽高比应介于1.25-1.5); 
    return; 
} 
//验证上传文件是否超出了大小 
if (img.filesize / 1024 > 150) { 
    alert(您上传的文件大小超出了150k限制！); 
    return false; 
}
其中，loadfile是html input file的id。在它的change事件，也就是选择了要上传的文件以后，让图片显示在图片框里吗，在上面代码的最后加上以下代码
复制代码 代码如下:
$(#stupic).attr(src, getfullpath(this));
既然用到了jquery,下面我们再分享一个用jquery的写的代码实例：
复制代码 代码如下: