javascript - 移动端页面能做修改头像功能的吗？

Question

最近我微信页面项目需要做一个修改头像功能，用input type file 能做这个功能吗？我看到淘宝，网易，微博移动端页面都没有做修改头像的功能，他们不做还是没有必要做；

Answer 1

当然能啊 没看过网页版贴吧微博么 随手写个 Demo
通过 FileReader 读取文件的 Base64 值并使用 img 标签显示预览

HTML

<label class="upload">
  <span>上传</span>
  <input type="file" accept="image/*">
</label>

CSS

/* 隐藏默认的上传控件 */
input[type=file] {
  dispaly: none;
}

/* 自定义上传按钮样式 */
.upload {
  ...
}

Javascript

document.querySelector('.upload input[type=file]').addEventListener('change', ev => {
  const file = ev.target.files[0] // 获取上传的第一个文件
  ev.target.value = null // 重置 input

  const reader = new FileReader()
  reader.onload = ev => {
    // 读取文件完毕
    const img = document.createElement('img')
    img.src = ev.target.result // 文件的 Base64 值
    document.body.appendChild(img)
  }
  console.info(file.name) // 本地文件名
  console.info(file.type) // 文件类型 (Content-Type)
  console.info(file.size) // 文件大小
  reader.readAsDataURL(file)
})

Answer 2

可以做，有没有必要看具体需求。