Vider un apercu d'image

Bonjour à tous voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <script type='text/javascript'>
    function preview_image2(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('output_image2');
            output.src = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }
    </script>
 
// ici le code du bouton qui permet d'effacer
 
    $(document).ready(function() {
                                        $('#btn-file-reset-id4').on('click',
                                            function() {
                                                $('#file4').val('');
 
                                            });
                                    });

Ici le formulaire qui affiche l’aperçu de l'image avant upload

Code:

1
2
3
4
5
6
7
8
 <input type="file" id="file4" name="image" accept="image/*"
                                                onchange="preview_image(event)">
 
                                            <div id="container">
                                                <img id="output_image" />
                                            </div>
 
                                        </div>

Le souci c'est que le bouton efface bien l'image dans le sens ou elle n'est plus envoyée mais l’aperçu reste visible.
Merci de votre aide :)