原声js实现图片上传

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>图片上传预览</title>  
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
<script type="text/javascript">  
    function imgPreview(fileDom){

        //判断是否支持FileReader  
        if (window.FileReader) {  
            var reader = new FileReader();  
        } else {  
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");  
        }  

        //获取文件  
        var file = fileDom.files[0];  
        var imageType = /^image\//;  

        //是否是图片  
        if (!imageType.test(file.type)) {  
            alert("请选择图片！");  
        } 
        
        //读取完成  
        reader.onload = function(e) {  
            //获取图片dom  
            var img = document.getElementById("preview");  
            //图片路径设置为读取的图片  
            img.src = e.target.result;  
        };  
        reader.readAsDataURL(file);  
    }  
</script>  
</head>  
<body>  
    <img id="preview" style="height: 200px; width: 200px;"/>  
    <br />  
    <input type="file" name="file" onchange="imgPreview(this)"  />  
</body>  
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容