【原】jquery图片预览

平时我们在做图片上传的时候，如果可以让用户选择图片的时候，看到图片的效果，那这样用户体验会好很多，因为用户可以就可以决定是否继续用这张图片，尤其是和ajaxuploadfile结合使用的时候，图片的预览让其做的更加的完美。

 

代码是这样的

$(function() {  
    var path,  
        clip = $("#img"),    //图片显示的地址   img的id  <img id="#img" src="#" />
        FileReader = window.FileReader;  

    $("#file").change(function() {       //#file是  <input type='file' id="file" /> 
  
        if (FileReader) {  
            var reader = new FileReader(),  
                file = this.files[0];  
            reader.onload = function(e) {  
                clip.attr("src", e.target.result);  
            };  
            reader.readAsDataURL(file);  
        }  
        else {  
            path = $(this).val();  
            if (/"\w\W"/.test(path)) {  
                pathpath = path.slice(1,-1);  
               
            }  
            clip.attr("src",path);
            
            
        }  
    });  
})

其实原理就是读取input type="file" 的路径，将这个路劲赋给 要显示的img的src那里

html代码

<!-- 上传的input  -->
<input type="file" id="file">

<!-- 预览的图片我想在这个img这里显示 -->
<img src="" id="img"  />