jquery 实现上传图片的预览

今天给大家展示一个input file上传图片的预览，先看看代码

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 < 1.25) {
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));

看看效果