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

我需要使用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>

有人能帮我吗？

[1]您将无法获得需要使用

更改的输入文件类型的值

[2]无需使用函数。您可以对图像使用class
avatar
。。将事件分开，然后在它的位置触发它


表格
submit
输入文件
change
图像
点击
触发输入文件点击


$（“#formAvatar”）。在（'submit'，函数（e）{//这里如果表单已提交，我会将图片发送到php处理页面
e、 预防默认值（）；
console.log（'submitted'）；
/*$.ajax({
键入：“POST”，
url:'traitements/traitementprofil.php'，
数据：新表单数据（本），
contentType:false，
cache:false，
processData:false，
成功：功能（数据）{
让errorWindow=document.getElementById（'erreur'）；
errorWindow.className=“警报危险my-5文本中心”；
errorWindow.innerHTML=数据；
}
});*/
});
$（'#inputAvatar'）。在（'change'，function（）{//上，因此在这里，当用户单击其配置文件图片时，我触发对输入文件的单击。默认情况下，该输入在页面上不可见。
让userfile=$（this.val（）；
if（userfile）{//这里我想检查是否选择了一个文件，但它似乎不起作用
$（“#formAvatar”）.submit（）；//如果前面的条件为true，我将在这里提交表单
}
}); // 关闭更改事件
$（'.avatar'）。在（'click'，function（）{//触发输入文件单击
$（'#inputAvatar'）。单击（）；
});

“alt=“avatar”class=“avatar圆形圆圈可点击”width=“150”>
工作非常好！非常感谢！我的荣幸@邪恶的狐狸..祝您愉快：-）
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;
        
                    }
        
                });
            
            })
        
        )}

    });
    
}