formData原生实现图片上传

  

   

    

     

    
    

     

      //修改头像--开始//
     
    
   

    

     

    
    

     

      let btn = document.querySelector('#avatarImage')
     
    
   

    

     

    
    

     

      let file = document.querySelector('#newuploadAvatar')
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      btn.onclick = function() {
     
    
   

    

     

    
    

     

          file.click() // 调取系统选择图片的弹框
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      // 监听input的file变化值
     
    
   

    

     

    
    

     

      file.onchange = function (event) {
     
    
   

    

     

    
    

     
    let file = event.target.files[0]
     
    
   

    

     

    
    

     
    upload(file)
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      function upload(file) {
     
    
   

    

     

    
    

     
    let xhr = new XMLHttpRequest()
     
    
   

    

     

    
    

     

          xhr.open('post', 'updateavatar', true)
     
    
   

    

     

    
    

     
    let formData = new FormData()
     
    
   

    

     

    
    

     

          formData.set('filename', file)
     
    
   

    

     

    
    

     

          xhr.send(formData)
     
    
   

    

     

    
    

     

          xhr.onreadystatechange = function() {
     
    
   

    

     

    
    

     
        if (xhr.readyState === 4 && xhr.status === 200) {
     
    
   

    

     

    
    

     
            console.log('success')
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      //修改头像--结束//
     
    
  
 

html部分:

  

   

    

     

    
    

     
 <div class="avatar__edit">
     
    
   

    

     

    
    

     
                                            <img id="avatarPreloader" src="__IMG__/preload.svg">
     
    
   

    

     

    
    

     
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
     
    
   

    

     

    
    

     
                                                <path d="M0 9.002v2.368h2.368l6.986-6.985-2.37-2.37zm11.185-6.45a.63.63 0 0 0 0-.891L9.707.185a.63.63 0 0 0-.891 0L7.66 1.34l2.37 2.37 1.156-1.156z"
     
    
   

    

     

    
    

     
                                                      fill="#383E45" fill-rule="evenodd"/>
     
    
   

    

     

    
    

     
                                            </svg>
     
    
   

    

     

    
    

     

      <!-- <label for="newuploadAvatar">-->
     
    
   

    

     

    
    

     
                                            <img id="avatarImage" src="{$user.headimg|default='__IMG__/avatarImage.png'}" width="110" height="110">
     
    
   

    

     

    
    

     

      <!-- </label>-->
     
    
   

    

     

    
    

     
                                        </div>
     
    
   

    

     

    
    

     
                                        <input type="file" id="newuploadAvatar" style="opacity: 0;" accept="image/png, image/jpeg, image/gif, image/jpg" data-max-size="2048" >
     
    
  
 

参考:https://juejin.im/post/5aa01068f265da23970669ce

文章来源: blog.csdn.net，作者：lxw1844912514，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/lxw1844912514/article/details/102960121