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:fakepath5-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>