难道file_input是保留字？

最新推荐文章于 2022-07-23 20:08:19 发布

中古骑士1992

最新推荐文章于 2022-07-23 20:08:19 发布

阅读量407

点赞数

本文链接：https://blog.csdn.net/u011436736/article/details/52954839

版权

写一个本地图片选择然后预览的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #file_preview{
                width: 600px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="file_preview"></div>
        <div id="file_preview_info"></div>
        <form  action="">
            <input type="file" id="file_input" />
        </form>

        <script>
        window.onload=function(){
            var file_input=document.getElementById("file_input");
            var preview=document.getElementById("file_preview");
            var info=document.getElementById("file_preview_info");
            file_input.addEventListener("change",function(){
                console.log("change...");
                file_preview.style.background="";
                if(!file_input.value){
                    alert("没有选择文件");
                }
                var file_input=fileInput.files[0];
                info.innerHTML='文件：'+file_input.name+'<br/>'+
                               '大小：'+file_input.size+'<br/>'+
                               '修改：'+file_input.lastModifiedDate;
                               alert("test");
                if(file_input.type !== 'image/jpeg' && file_input.type !== 'image/jpg'){
                    alert("不是有效的图片文件");
                    return;
                }
                var reader=new FileReader();
                reader.onload=function(e){
                    var data=e.target.result;
                    preview.style.background='url('+data+')';

                }
                reader.readAsDataURL(file_input);

            });
        }
        </script>
    </body>
</html>

获取标签是同通过var file_input=document.getElementById("file_input");
然后判断了一下file_input是否为空？

if(!file_input.value){
   alert("没有选择文件");
}

没想到浏览器一直报错：test02.html:27 Uncaught TypeError: Cannot read property 'value' of undefined

最后把变量名file_input改为fileInput就测试通过了？

至今不明白这是为什么？

中古骑士1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
难道file_input是保留字？

写一个本地图片选择然后预览的代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style type="text/css"> #file_preview{ width: 600px; height: 400px;
复制链接

扫一扫