Discussion :

[toulousain3117]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[toulousain3117]

finalement solution trouvé en modifiant par change l'appelle du jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("#file").change(function(){        var fd = new FormData();
        var files = $('#file')[0].files[0];
		$("#veriflog").fadeIn(); 
					$('#veriflog').delay(3000).fadeOut(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');
                }
            },
        });
    });