图片上传对类型的判断及对上传图片尺寸的判断

最新推荐文章于 2024-07-08 18:04:07 发布

前端小小少年

最新推荐文章于 2024-07-08 18:04:07 发布

阅读量694

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/m0_52107471/article/details/118519436

版权

最近工作中用jsp和模板引擎写了一个管理平台,当中图片上传这个部分收获不小

1.上传图片判断图片的类型,一般写的是

//文件的路径_this是上传事件的时候传过来的this
var path = $(_this).val()
var arr = path.split("\\")
//文件名
var fileName = arr[arr.length - 1]
//文件的格式
var name1 = path.substr(path,lastIndexOF('.')+1,path.length)

//判断文件类型
if (name1 !='jpg' || name1 !='gif' || name1 != 'png') {
  alert('图片类型不符合')
  return
}
if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(name1)) {

  alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
}

//学了一种新的写法,在input type = 'file'当中通过accept来实现
<input type="file" name="" id="img-file" onchange="onUpload(this)" accept="image/png,image/jpeg,image/jpg,image/gif">

2.业务需求
(1) 有两个图片上传的位置,一个上传按钮,点击哪个哪个盒子的border变成蓝色(如图所示)
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #bigbox{
    display: flex;
  }
  .box{
    width: 153px;
    height: 153px;
    border: 1px solid;
  }
</style>
<body>
 
  <div id="bigbox">
     <!-- 第一个盒子 -->
    <div style="margin-right: 50px;">
      <label for="">图标1</label>
      <div class="box box1" onclick="boxClick('1')">
        <img src="" alt="">
      </div>
    </div>
    <!-- 第二个盒子 -->
    <div>
      <label for="">图标2</label>
      <div class="box box2" onclick="boxClick('2')">
        <img src="" alt="">
      </div>
    </div>
  </div>
  <!-- 上传 -->
  <div style="margin-top: 30px;">
    <input type="file" onchange="onUpload(this,{'width':153,'height':153})">
  </div>
  <script src="./jquery3.5.1.js"></script>
  <script>
    var flag = ''
    function boxClick(type){
      if(type == '1'){
        $('.box1').css('border','1px solid blue')
        $('.box2').css('border','1px solid')
        flag = '1'
        return
      }
      $('.box2').css('border','1px solid blue')
      $('.box1').css('border','1px solid')
      flag = '2'
    }
    function onUpload(_this,imgsize){
      const file = _this.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function(e){
        const img = new Image()
        img.src = e.target.result
        img.onload = function (){
          var w = img.width
          var h =img.height
          if(w != imgsize['width'] || h != imgsize['height']){
            alert('图片宽高不符合')
            return
          }
          uploadImg(_this,imgsize)
        }
      }
    }
    function uploadImg(_this,imgsize){
      var path = $(_this).val()
      var arr = path.split('\\')
      var fileName =arr[arr.length-1]
      var name = path.substr(path.lastIndexOf('.')+1,path.length)
      console.log(path,arr,fileName,name)
      //有接口可以在这里调用ajax上传图片的接口,将下面两个if写到success的回调当中
      if(flag == '1'){
        $('.box1').attr('src',path)
      }
      if(flag == '2'){
        $('.box2').attr('src',path)
      }
    }
  </script>
</body>
</html>