js修改头像并上传插件

基础概念

在Web开发中，修改头像并上传通常涉及到前端JavaScript与后端服务器的交互。前端负责捕获用户选择的图片文件，进行必要的处理（如裁剪、压缩），然后将处理后的图片发送到服务器进行存储。

类型与应用场景

类型：通常这类插件会结合HTML5的File API、Canvas API以及AJAX技术来实现。
应用场景：社交媒体、论坛、在线商城等需要用户自定义头像的平台。

示例代码

以下是一个简单的示例，展示如何使用JavaScript实现头像修改和上传功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头像修改与上传</title>
<style>
  #preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
  }
  #preview img {
    width: 100%;
    height: auto;
  }
</style>
</head>
<body>

<input type="file" id="avatarInput" accept="image/*">
<button onclick="uploadAvatar()">上传头像</button>
<div id="preview"></div>

<script>
  document.getElementById('avatarInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        const img = new Image();
        img.src = e.target.result;
        img.onload = function() {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          const size = 100;
          canvas.width = size;
          canvas.height = size;
          ctx.drawImage(img, (img.width - size) / 2, (img.height - size) / 2, size, size, 0, 0, size, size);
          document.getElementById('preview').innerHTML = '';
          document.getElementById('preview').appendChild(canvas);
        };
      };
      reader.readAsDataURL(file);
    }
  });

  function uploadAvatar() {
    const fileInput = document.getElementById('avatarInput');
    const file = fileInput.files[0];
    if (file) {
      const formData = new FormData();
      formData.append('avatar', file);
      fetch('/upload-avatar', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log('上传成功:', data);
      })
      .catch(error => {
        console.error('上传失败:', error);
      });
    }
  }
</script>

</body>
</html>