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

长云9527

于 2017-02-21 11:18:36 发布

阅读量983

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/sinat_32328353/article/details/56278561

版权

js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用JavaScript实现input元素选择本地图片后进行预览，详细讲解了相关代码实现步骤，帮助开发者理解这一常见前端功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>