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"  />