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

以下是一个使用JavaScript实现的简单的头像图片上传插件示例，它支持上传类型的验证、大小的验证以及图片尺寸的验证：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Avatar Upload Plugin</title>
<script>
function AvatarUploader(options) {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  input.style.display = 'none';
  input.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (!file) {
      alert('No file selected.');
      return;
    }
    if (!file.type.startsWith('image/')) {
      alert('File must be an image.');
      return;
    }
    if (file.size > options.maxSize) {
      alert('File size is too large.');
      return;
    }
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        if (img.width > options.maxWidth || img.height > options.maxHeight) {
          alert('Image dimensions are too large.');
          return;
        }
        options.onSuccess(e.target.result);
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
 
  this.click = () => input.click();
}
 
// Usage example:
document.addEventListener('DOMContentLoaded', () => {
  const uploader = new AvatarUploader({
    maxSize: 2 * 1024 * 1024, // 2MB
    maxWidth: 500, // px
    maxHeight: 500, // px
    onSuccess: (dataUrl) => {
      // Handle the successful upload here, e.g., update the avatar image.
      console.log('Avatar image uploaded:', dataUrl);
    }
  });
 
  document.getElementById('upload-button').addEventListener('click', uploader.click);
});
</script>
</head>
<body>
<button id="upload-button">Upload Avatar</button>
</body>
</html>

在这个示例中，我们定义了一个AvatarUploader类，它接受一个包含maxSize、maxWidth和maxHeight以及onSuccess回调函数的options对象。点击按钮后，它会触发隐藏的文件输入域，用户选择图片后，会进行文件类型、大小和尺寸的验证。验证通过后，会将图片转换为DataURL，然后调用onSuccess回调函数。

使用时，你需要在HTML中定义一个按钮，并在JavaScript中设置事件监听器来触发上传。这个插件可以根据需求进行扩展，比如添加上传到服务器的功能，或者实现更复杂的验证逻辑。

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

评论已关闭

推荐阅读