js实现图片sh上传预览效果

最新推荐文章于 2019-11-06 09:55:46 发布

top-ww

最新推荐文章于 2019-11-06 09:55:46 发布

阅读量202

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/wen_3370/article/details/79602531

版权

php 专栏收录该内容

83 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
    <head>  
        <title>js上传图片--预览图片</title>  
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>  
    </head>  
       
    <body>  
        <form>  
            <input type="file" id="file" onChange="preview(this)"/>  
            <img src="" id="previewimg" width="50px" height="40px"/>  
        </form>  
        <script type="text/javascript">  
            function preview(obj){  
               var file =  document.getElementById('file').value;//获取文件
                var index = file.lastIndexOf('.'); //获取最后一位小数点
                var extension =  file.substr(index +  1);
                var arr = ['jpeg','png','jpg','gif'];
                if (isInArray(arr,extension)) {
                    var img = document.getElementById("previewimg");  
                    img.src = window.URL.createObjectURL(obj.files[0]);
                } else {
                     alert('请选择正确的格式');
                    return false;
                }
                 
            }  
            /**
            * 使用循环的方式判断一个元素是否存在于一个数组中
            * @param {Object} arr 数组
            * @param {Object} value 元素值
            */
            function isInArray(arr,value){
                for(var i = 0; i < arr.length; i++){
                    if(value === arr[i]){
                        return true;
                    }
                }
                return false;
            }
                    </script>  
                </body>  
            </html>