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

看看效果

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