JS input上传本地img实现预览功能

<input type="file" id="add_file" onchange="preImg(this);" />
<img id="show_img" src="" width="300px" height="300px"/>

<script>
    var imgurl = "";  
    function preImg(node) {  
        var imgURL = "";  
        try{  
            var file = null;  
            if(node.files && node.files[0] ){  
                file = node.files[0];  
            }else if(node.files && node.files.item(0)) {  
                file = node.files.item(0);  
            }  
            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
            try{  
                imgURL =  file.getAsDataURL();  
            }catch(e){  
                imgRUL = window.URL.createObjectURL(file);  
            }  
        }catch(e){  
            if (node.files && node.files[0]) {  
                var reader = new FileReader();  
                reader.onload = function (e) {  
                    imgURL = e.target.result;  
                };  
                reader.readAsDataURL(node.files[0]);  
            }  
        }  
        creatImg(imgRUL);  
        return imgURL;  
    }  
    function creatImg(imgRUL){ 
        console.log(imgRUL);
        document.getElementById("show_img").src=imgRUL;
        $("#add_file").hide();
        document.getElementById("show_img").style.position="absolute";
        document.getElementById("show_img").style.top="0";
    }  
</script>