JavaScript连载36-上传文件以及获取input表单焦点

一、表单标签焦点

    <input type="text" placeholder="请输入姓名">
    <script>
        window.onload = function (ev) {
            var input = document.getElementsByTagName("input")[0];
            //1.获得焦点，也就是按下鼠标的那个光标
            input.onfocus = function (ev1) {
                //this是一个指针用于指向变量
                this.style.width = '600px';
                this.style.height = '40px';
                this.style.outline = 'none';
                this.style.fontSize = '20px';

            }
            //2.失去焦点
            input.onblur = function (ev2) {
                this.style.border = '10px solid red';
                this.style.height = '40px';
            }
        }
    </script>
  • 不点击输入输入框时的默认样式

  • 点击了输入框之后
  • 再点击其他空白处的时候

二、对上传文件进行格式筛选

    <label for="">上传图片：</label>
    <input type="file" id="file"><!--file就是上传文件的按钮-->
    <!--jpg png gif 格式的图片才能上传-->
    <script>
        window.onload = function (ev) {
            //1.获取标签
            var file = document.getElementById("file");
            //2.监听作用域的变化
            file.onchange = function (ev2) {
                console.log("上传文件了");
                //2.1获取用户上传文件的内容
                var path = this.value; //this.value就是上传文件的地址
                //2.2截取
                var suffix = path.substr(path.lastIndexOf('.'));//字符串操作函数substr,一个参数代表那那里截取到最后的字符
                //lastIndexOf()最后某个字符的索引值
                console.log(suffix);

                //2.3大小写转换一下
                var lowerSuffix = suffix.toLowerCase();//转换成小写
                //2.4判断
                if(lowerSuffix === ".jpg" || lowerSuffix === '.png' || lowerSuffix === '.gif'){
                    alert("上传成功");
                }else{
                    alert("上传格式不正确，只能jpg\\png\\gif");
                }

            }
        }
    </script>
  • 上传一个文件不是.jpg.png.gif后缀的

  • 上传一张图片1.jpg

三、源码：

  • D36_1_CommonAffairOfInputLable.html
  • D36_2_FormatVerificationOfUploadingImage.html
  • 地址:https://github.com/ruigege66/JavaScript/blob/master/D36_1_CommonAffairOfInputLable.html
  • https://github.com/ruigege66/JavaScript/blob/master/D36_2_FormatVerificationOfUploadingImage.html
  • 博客园：https://www.cnblogs.com/ruigege0000/
  • CSDN：https://blog.csdn.net/weixin_44630050?t=1
  • 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
赞 (0)

相关推荐