原生JS实现图片上传预览功能

emmm 貌似只能兼容IE10

笔记笔记 嗯 记下来先~

 

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>js之图片上传预览功能-兼容ie10以上</title>
        <style type="text/css">
            .img,
            img {
                width: 100%;
                height: auto;
            }

            #preview {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                border-radius: 10px;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div id="preview"></div>
        <input type="file" onchange="preview(this)" />
        <script type="text/javascript">
            function preview(file) {
                var prevDiv = document.getElementById('preview'),
                    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
                console.log('file.files='+file.files);
                console.log('file.files[0]='+file.files[0]);
                if(file.files && file.files[0]) {
                    //验证选择的文件是否是图片
                    if (!rFilter.test(file.files[0].type)) {
                        alert("You must select a valid image file!PS：请选择一张图片！");
                        return;
                    }
                    var reader = new FileReader();
                    reader.onload = function(evt) {
                        console.log('evt.target='+evt.target);
                        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
                    }
                    reader.readAsDataURL(file.files[0]);
                } else {
                    prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
                }
            }
        </script>
    </body>

</html>

 

posted @ 2018-06-07 14:39  超拉风の小见见  阅读(133)  评论(0)    收藏  举报