输入框监听、 

window.onload = function (ev) {
        var input = document.getElementsByTagName('input')[0];

        // 1. 获得焦点
        input.onfocus = function (ev1) {
            this.style.width = '600px';
            this.style.height = '40px';
            this.style.outline = 'none';
            this.style.fontSize = '20px';
        };

        // 2. 失去焦点
        input.onblur = function (ev1) {
            this.style.border = '10px solid red';
            this.style.color = 'red';
        }
    }
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <label>上传图片：</label>
 9     <input type="file" id="file">
10     <!--
11        jpg png gif
12     -->
13 <script>
14     window.onload = function (ev) {
15         // 1. 获取标签
16         var file = document.getElementById('file');
17         // 2. 监听作用域的变化
18         file.onchange = function (ev1) {
19             // 2.1 获取用户上传的内容
20             // console.log(this.value);
21             console.log(this.files);
22             console.log(this.value);   //C:\fakepath\5-5.jpg
23             var path = this.value;
24 
25             // 2.2 截取
26             var suffix = path.substr(path.lastIndexOf('.'));
27             // console.log(suffix);
28 
29             // 2.3  统一转成小写
30             var lowerSuffix = suffix.toLowerCase();
31 
32             // 2.4 判断
33             if(lowerSuffix === '.jpg' || lowerSuffix === '.png' || lowerSuffix === '.gif'){
34                 alert('上传图片格式正确');
35             }else {
36                 alert('上传图片格式不正确');
37             }
38         }
39     }
40 </script>
41 </body>
42 </html>

 

posted @ 2019-07-15 22:32  疏影横斜水清浅  阅读(198)  评论(0)    收藏  举报