欢迎光临
我的个人博客网站

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> 
  • 不点击输入输入框时的默认样式
    JavaScript连载36-上传文件以及获取input表单焦点
  • 点击了输入框之后
    JavaScript连载36-上传文件以及获取input表单焦点
  • 再点击其他空白处的时候
    JavaScript连载36-上传文件以及获取input表单焦点

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

    <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后缀的
    JavaScript连载36-上传文件以及获取input表单焦点
  • 上传一张图片1.jpg
    JavaScript连载36-上传文件以及获取input表单焦点

三、源码:

  • 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) 打赏
未经允许不得转载:张拓的天空 » JavaScript连载36-上传文件以及获取input表单焦点
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏