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>
