前端实现图片的上传预览功能

最近工作用到好几处图片的上传预览,从别处扒了代码,自己又修改了一下,直接上代码:

<div class="divider" style="border:1px solid #ccc;width:430px;height:200px;text-indent:0;text-align: center;">
    <img src="" alt="" srcset="" id="new_img2" style="width:auto;height:auto;max-width: 100%;max-height: 100%;">
</div>       
  <input id="testFileInput2" type="file" multiple="false" name="litpic" />
multiple 表示可不可以接收多个文件
img的css样式可以帮助实现图片的等比例缩放,外框多大,图片就会缩放
<script>
var new_file2 = document.querySelector('#testFileInput2'),
            new_img2 = document.querySelector('#new_img2');
            
        new_file2.addEventListener('change', function () {
          var file = this.files[0],
            size = file.size,
            extStart = file.name.lastIndexOf('.'),
            ext = file.name.substring(extStart, file.name.length).toUpperCase();
          maxSize = Math.pow(3, 20);
          if (size > 3*1024*1024 || size <= 0) {
            alert('图片太大了')
          } else {
            var reader = new FileReader();
            reader.addEventListener("load", function () {
              new_img2.src = reader.result;
            }, false);
            reader.readAsDataURL(file);
          }
      
        }, false);
</script>

效果图

image.png

实现预览功能,如果要加上限制,显示图片格式,jpg或者png,其他格式的不可以
就在else前面再加一层判断

      new_file2.addEventListener('change', function () {
          var file = this.files[0],
            size = file.size,
            extStart = file.name.lastIndexOf('.'),
            ext = file.name.substring(extStart, file.name.length).toUpperCase();// 转大写
            console.log(ext)
            // maxSize = Math.pow(3, 20);
          if (size > 3*1024*1024 || size <= 0) {
            alert('图片太大了');
            return false;
          }
          if (ext !== '.PNG') {
            alert('图片格式必须是png格式');
            return false;
          }else {
            var reader = new FileReader();
            reader.addEventListener("load", function () {
              new_img2.src = reader.result;
            }, false);
            reader.readAsDataURL(file);
          }
      
        }, false);

这边只限制了png格式,只可以png格式上传