Problem to upload image

[Rosangela Oliveira]

Hi,I need some help....

I have a problem when I try to upload the image in a  django project, it's open the windows to upload the image twice.

in HTML I did:

<div class="col-md-10">
   <input type="image" src="http://shackmanlab.org/wp-content/uploads/2013/07/person-placeholder.jpg" width='125px' height='125px'     style="float:left; margin-top:40px; margin-bottom:10px; margin-right:30px"></input>
   <input type="file" id="my_file" style="display: none;"/>
    <font size="6" style="position:absolute; bottom:0">teste</font>
</div>

in controller

}
    $("input[type='image']").click(function () {
        $("input[id='my_file']").click();
    });
}

Thanks for helping

[Mark Steadman]

This is a JavaScript question more than it is a Django one, as your problem is client-side. What browser are you running this in? I've just tried it in Safari, Chrome and Firefox on a Mac and haven't come up against the same issue.

What you're doing is slightly odd, as I'd normally recommend using a button rather than an ImageField, but there's strictly-speaking no reason it shouldn't work.

See if this helps, though:

It's usually better, in modern jQuery development to pass your callback to the on('click') function when you want to bind to the click event, rather than calling click() and passing in a function. This helps reduce the likelihood of callbacks being triggered multiple times. So something like this:

<script>

    $('input[type="image"]').on('click',

        function() {

            $('#my_file').trigger('click');

        }

    );

</script>

Also make sure your script isn't running twice for some reason. Maybe add a console.log line before you trigger the file input's click event, so that you can see if your callback is actually being run twice for some reason.

Hope that helps.