JS:从文件夹中选择任意头像

<input type="file" id="avatarInput">

const avatarInput = document.getElementById('avatarInput');
avatarInput.addEventListener('change', handleAvatarSelection);

function handleAvatarSelection(event) {
  const file = event.target.files[0];
  
  // 进行文件类型的校验，确保选中的是图片文件
  if (file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onload = function(event) {
      const avatarURL = event.target.result;
      const avatarImage = document.createElement('img');
      avatarImage.src = avatarURL;
      
      // 将头像显示在页面上的某个元素中
      const avatarContainer = document.getElementById('avatarContainer');
      avatarContainer.appendChild(avatarImage);
    }
    reader.readAsDataURL(file);
  } else {
    alert('请选择图片文件！');
  }
}