Modifier un appel jquery d'upload d'image

bonjour

j'ai un script pour upload une image en jquery, le upload fonctionne niquel, mais en cliquant sur le bouton UPLOAD, je souhaiterais le modifier et que le upload se fasse quand l'utilisateur a choisi son image .

voici les codes jquery et du formulaire :

Code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#but_upload").click(function(){        var fd = new FormData();
        var files = $('#file')[0].files[0];
        fd.append('file',files);        $.ajax({
            url: 'addlogo.php',
            type: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response){
                if(response != 0){
                    $("#img").attr("src",response); 
                    $(".preview img").show(); // Display image element
 
					$("#imglogo").load("index.php #imglogo");
                }else{
                    alert('file not uploaded');
                }
            },
        });
    });

et le form :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="form-group">
    <label for="exampleInputEmail1">votre logo<i class="fa fa-check-circle checkout" style="display: none;"id="validationadresse"></i></label>
<div class="container">
    <form method="post" action="" enctype="multipart/form-data" id="myform">
        <div class='preview'>
            <img src="" id="img" width="100" height="100">
        </div>
        <div >
            <input type="file" id="file" name="file" />
            <input type="button" class="button" value="Upload" id="but_upload">
        </div>
    </form>
</div>
  </div>