JavaScript头像图片上传插件支持上传类型大小尺寸验证

清疚 2024-03-22 10:12 63阅读 0赞

一行代码实现头像上传，图片大小、尺寸，类型验证

html调用

js调用

var uploader = new ImageUploader({
    		  accept: ['jpg', 'png', 'gif'],
    		  maxSize: 1,
    		  maxWidth: 800,
    		  maxHeight: 1000,
    		  uploadUrl: 'upload',
    		  success: function(url) {
    		
                 //上传成功回调
    		     
    		   }
    		});

调用效果如图

![c5ada937c3ba4254a7cdcb6307c01912.png][]

**直接点击头像即可实现图片上传**

以下是插件代码

function ImageUploader(options) {
      this.options = options || {}; // 参数配置
      this.fileInput = null; // 文件输入框
      this.previewImage = null; // 预览图片
      this.uploadUrl = options.uploadUrl || '/upload'; // 上传接口地址（默认值为'/upload'）
    
      // 初始化
      this.init();
    }

// 初始化方法
    ImageUploader.prototype.init = function() {
      var that = this;
    
      // 创建文件输入框
      this.createFileInput();
    
      // 监听文件选择事件
      this.fileInput.addEventListener('change', function(event) {
        var file = event.target.files[0];
    
        // 判断图片类型
        if (that.options.accept && !that.checkFileType(file)) {
          alert('只能上传 ' + that.options.accept.join(',') + ' 类型的图片');
          return;
        }
    
        // 判断图片大小
        if (that.options.maxSize && file.size > that.options.maxSize * 1024 * 1024) {
          alert('图片大小不能超过 ' + that.options.maxSize + 'MB');
          return;
        }
    
        // 验证图片尺寸
        var reader = new FileReader();
        reader.onload = function() {
          var img = new Image();
          img.onload = function() {
            if (that.options.maxWidth && img.width > that.options.maxWidth) {
              alert('图片宽度不能超过 ' + that.options.maxWidth + '像素');
              return;
            }
            if (that.options.maxHeight && img.height > that.options.maxHeight) {
              alert('图片高度不能超过 ' + that.options.maxHeight + '像素');
              return;
            }
            that.uploadFile(file);
          };
          img.src = reader.result;
        };
        reader.readAsDataURL(file);
      });
    };

// 创建文件输入框
    ImageUploader.prototype.createFileInput = function() {
      var input = document.createElement('input');
      input.type = 'file';
      input.style.display = 'none';
      if (this.options.accept) {
        input.accept = this.options.accept.join(',');
      }
      document.body.appendChild(input);
      this.fileInput = input;
    };

// 检查文件类型是否符合要求
    ImageUploader.prototype.checkFileType = function(file) {
      var fileType = file.type;
      if (!fileType) {
        return false;
      }
      fileType = fileType.split('/').pop();
      return this.options.accept.indexOf(fileType) !== -1;
    };

// 执行上传操作
    ImageUploader.prototype.uploadFile = function(file) {
      var that = this;
      var xhr = new XMLHttpRequest();
      xhr.open('POST', this.uploadUrl, true);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      var formData = new FormData();
      formData.append('file', file);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200 || xhr.status === 201) {
            var responseText = JSON.parse(xhr.responseText);
            if (responseText.errno === 0) {
              that.showUploaded(responseText.data.url);
            } else {
              alert(responseText.msg);
            }
          } else {
            alert('上传失败，请稍后再试！');
          }
        }
      };
      xhr.send(formData);
    };

[c5ada937c3ba4254a7cdcb6307c01912.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3492fa08d9c54192b7042f666a206300.png