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

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

html调用

javascript"><img  src="这里放默认头像"  id="preview" onclick="uploader.fileInput.click()"/>

js调用

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

调用效果如图

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

以下是插件代码

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);
};