关于图片预览的实现，求教大神指导，急急急

我想实现qq空间中图片上传的功能的效果，就是点击上传图片按钮，在电脑上选择照片后，
在页面中显示图片的缩略预览图，例如：
图片说明
图片说明

目前想到了用HTML5之FileReader来使用，但不知道如何实现，如何给input type=file绑定一个事件：让在本地电脑选择好照片后，系统读取照片信息成功后触发预览

javascript客户端图片预览，兼容最新firefox，chrome和IE11

http://www.cnblogs.com/leejersey/p/3660202.html
http://www.tuicool.com/articles/JjmMfaB

参考：

http://www.oschina.net/p/jquery-file-upload

需要解决兼容性问题
html


js:

var fileName=document.getElementsByName("file")[0];
var img=document.getElementById("fileImg");

fileName.onchange = function(){
getFilePath(this, function(file_path){
    //alert(file_path);
    img.setAttribute("src",file_path);
});

}

function getFilePath(fileName, callback){
var url = '';
if(document.all){
url = fileName.value;
}else{
if(fileName.files && fileName.files[0]){
if(window.File && window.FileReader && window.FileList && window.Blob){
var reader = new FileReader();
reader.onloadend = function(e){
if(e.target.readyState == FileReader.DONE){
callback(e.target.result);
}
};
reader.readAsDataURL(fileName.files[0]);
}else if(fileName.files[0].getAsDataURL() != undefined){
url = fileName.files[0].getAsDataURL();
}
}
}
if(url != '')
callback(url);
}
// Javascript获取IE浏览器版本号
// 非IE浏览器返回空字符串
function getIEVersion(){
if (window.navigator.userAgent.indexOf('MSIE') > -1) {
var regex = /MSIE ([^;]*);/i;
regex.test(window.navigator.userAgent);
return RegExp.$1;
} else {
return '';
}
}

window.onload= function () {
    getFilePath();
    getIEVersion();
}

我分享下，我写出来的效果代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title></title>
</head>
<body style="background: darkgrey" >
<input type="file" multiple id="fileIpt" size="120"/><br/>
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
    function test(){
        var files = document.getElementById("fileIpt").files;
        console.info(files);
        for (var i = 0;i < files.length;i++){
            var f = files[i];
            if (f.type.indexOf("image") != -1){
                var reader = new FileReader();
                reader.readAsDataURL(f);
                console.info(reader.readAsDataURL(f))
                reader.onload = function(evt){
                    var resDiv =  document.getElementById("result");
                    var oImg = document.createElement("img");
                    oImg.setAttribute("src",this.result);
                    oImg.setAttribute("width",300);
                    oImg.setAttribute("height",300);
                    resDiv.appendChild(oImg);
                }
            }
        }
    }

    $('#fileIpt').change(function(){
        test()
    })



</script>


</body>
</html>