使用 ajax 和 jquery 上传文件（图片）

Question

我需要使用 jquery 和 ajax 编写一个函数，在点击头像时，用户可以选择一张图片并上传一张新图片。将其保存在我网站文件的文件夹中。

所以目前我有这个 html：

            <img src="images/avatars/<?= $infos['Avatar']; ?>" onclick="setPicture()" 
            alt="avatar" class="rounded-circle clickable" width="150">

            <form class="d-none" id="formAvatar" method="post" enctype="multipart/form- 
            data">
               <input class="d-none" type="file" id="inputAvatar" name="inputAvatar" />
            </form>

这是我的脚本：

function setPicture() {

    $('#inputAvatar').trigger('click', function() { // So here i trigger a click on the input file when the user click on his profile picture. The input is not visible by default on the page. 
    
        let userfile = $('#inputAvatar').val();
    
        if(userfile) { // here i want to check if a file has been selected but it doesn't seems to work

            $('#formAvatar').submit(); // Here i submit the form if the previous condition is true
        
            $("#formAvatar").on('submit',(function(e) { // Here if the form is submitted i send the picture to a php treatment page
            
                e.preventDefault();

                $.ajax({
        
                    type: 'POST',
                    url: 'traitements/traitement-profil.php',
                    data:  new FormData(this),
                    contentType: false,
                    cache: false,
                    processData:false,
        
                    success: function(data) {
        
                        let errorWindow = document.getElementById('erreur');

                        errorWindow.className = "alert alert-danger my-5 text-center";
                        errorWindow.innerHTML = data;
        
                    }
        
                });
            
            })
        
        )}

    });
    
}

谁能帮帮我？

Answer 1

^[1]如果输入文件类型为.trigger，您将无法获得值，您需要使用change

^[2] 无需使用函数。您可以使用avatar 类作为图像.. 并将事件分开然后在它的位置触发它

• 表格submit
• 输入文件change
• 图片click触发输入文件点击

$("#formAvatar").on('submit', function(e) { // Here if the form is submitted i send the picture to a php treatment page

  e.preventDefault();
  console.log('submitted');
 /* $.ajax({

      type: 'POST',
      url: 'traitements/traitement-profil.php',
      data:  new FormData(this),
      contentType: false,
      cache: false,
      processData:false,

      success: function(data) {

          let errorWindow = document.getElementById('erreur');

          errorWindow.className = "alert alert-danger my-5 text-center";
          errorWindow.innerHTML = data;

      }

  });*/

});

$('#inputAvatar').on('change', function() { // So here i trigger a click on the input file when the user click on his profile picture. The input is not visible by default on the page. 

    let userfile = $(this).val();
    if(userfile) { // here i want to check if a file has been selected but it doesn't seems to work
      $('#formAvatar').submit(); // Here i submit the form if the previous condition is true
    }
}); // close the change event
  
$('.avatar').on('click' , function(){ // trigger the input file click
  $('#inputAvatar').click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="images/avatars/<?= $infos['Avatar']; ?>"  alt="avatar" class="avatar rounded-circle clickable" width="150">
<form class="d-none" id="formAvatar" method="post" enctype="multipart/form- 
data">
   <input class="d-none" type="file" id="inputAvatar" name="inputAvatar">
</form>