input上传文件图片本地预览

<form>
<input type="file" id="avatar" name="avatar">
<button>点击上传<button>
<form>

<label for="avatar">
<img src="/img/avatar.jpg"  alt="图片" />
</label>

<script>

const current = null  //全局变量接收文件信息

//获取对象
const inpt = document.querySelector('input');
const img = document.querySelector('img');

//图片本地预览
inpt.onchange = function(){
   
  //拿到文件信息
   console.dir(this) 
  const file = this.files[0]

  //判断有无内容,则什么都不做
  if(!file) return

  //准备new filereader(),去解析文件
  const fd = new FileReader()

  //解析文件,是异步的
  fd.readAsDataURL(file)
  
  //解析完毕事件
  fd.onload = function(){
   console.log(fd.result) //解析结果
   img.src = fd.result
   current = file

  }
}

//图片上传
const form = document,querySelector('form')
form.submit = function(e){
    e.preventDefault();
 
    //获取文件信息到form里
    const formData = new FormData()

    //图片必选，判断current
    if(!current) return window.alert("未选择图片")

   formData.append("avatar",current)
  
     const xhr = new XMLHttpRequest()
     xhr.open('post','/v1/setphoto)
     xhr.send(formData)
     xhr.onload = function (){
        const res = Json.Parse(xhr.responseText)
        console.log(res)
     }
}

</script>