jquery 实现上传图片的预览

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

1. function getFullPath(obj) {    //得到图片的完整路径  
2.     if (obj) {  
3.         //ie  
4.         if (window.navigator.userAgent.indexOf("MSIE") >= 1) {  
5.             obj.select();  
6.             return document.selection.createRange().text;  
7.         }  
8.         //firefox  
9.         else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {  
10.             if (obj.files) {  
11.                 return obj.files.item(0).getAsDataURL();  
12.             }  
13.             return obj.value;  
14.         }  
15.         return obj.value;  
16.     }  
17. } 

这段代码是获取客户端图片的完整路径

我们再限制其大小和格式

1. $("#loadFile").change(function () {  
2.         var strSrc = $("#loadFile").val();  
3.         img = new Image();  
4.         img.src = getFullPath(strSrc);  
5.         //验证上传文件格式是否正确  
6.         var pos = strSrc.lastIndexOf(".");  
7.         var lastname = strSrc.substring(pos, strSrc.length)  
8.         if (lastname.toLowerCase() != ".jpg") {  
9.             alert("您上传的文件类型为" + lastname + "，图片必须为 JPG 类型");  
10.             return false;  
11.         }  
12.         //验证上传文件宽高比例  
13.  
14.         if (img.height / img.width > 1.5 || img.height / img.width < 1.25) {  
15.             alert("您上传的图片比例超出范围，宽高比应介于1.25-1.5");  
16.             return;  
17.         }  
18.         //验证上传文件是否超出了大小  
19.         if (img.fileSize / 1024 > 150) {  
20.             alert("您上传的文件大小超出了150K限制！");  
21.             return false;  
22.         } 

其中呢，这个loadFile是html input file的id。在它的change事件，也就是选择了要上传的文件以后，让图片显示在图片框里吗，在上面代码的最后加上以下代码

1. $("#stuPic").attr("src", getFullPath(this)); 

看看效果

本文转自 BruceAndLee 51CTO博客，原文链接：http://blog.51cto.com/leelei/409675，如需转载请自行联系原作者