一个上传图片，预览图片的小demo

Posted 2020-10-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个上传图片，预览图片的小demo相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>3</title>  
<script>  
function getFullPath(obj) {  
    if (obj) {  
        //Internet Explorer   
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {  
            obj.select();  
            return document.selection.createRange().text;  
        }   
        //Firefox  
        if (window.navigator.userAgent.indexOf("Firefox") >= 1) {  
            if (obj.files) {  
                return obj.files.item(0).getAsDataURL();  
            }  
            return obj.value;  
        }   
  
        //兼容chrome、火狐等，HTML5获取路径         
        if (typeof FileReader != "undefined") {  
            var reader = new FileReader();  
            reader.onload = function(e) {  
                document.getElementById("pic").src = e.target.result + "";   
            }  
            reader.readAsDataURL(obj.files[0]);  
        } else if (browserVersion.indexOf("SAFARI") > -1) {  
            alert("暂时不支持Safari浏览器!");  
        }  
  
    }   
}  
  
function showPic(obj) {  
    var fullPath = getFullPath(obj);  
    if (fullPath) {  
        document.getElementById("pic").src = fullPath + "";  
    }  
}  
</script>  
</head>  
<body>  
    <input type="file" onchange="showPic(this)">  
    <img src="" id="pic">  
</body>  
</html>

由于工作需要，自己写了个小demo，通过自己组装，可以实现一定的需求。

以上是关于一个上传图片，预览图片的小demo的主要内容，如果未能解决你的问题，请参考以下文章

求PHP多图片上传带预览的插件，有demo最好，

vue 实现图片上传与预览，以及清除图片

求js多张图片上传，可预览右上角带删除图标的代码

HTML5可预览多图片ajax上传(使用formData传递数据)

微信小程序上传图片+图片预览