ajax upload file after choose file auto submit

Question

I tried to make ajax upload and I don't wanna make a submit button. just let user when choose file done auto submit..

I tried use change() to get form data change but after click second time it will alert not just once. I don't know why , is there any better idea to make it work!

HTML

<div class="article-create">
    <table class="table">
        <td>
            <form action="" enctype="multipart/form-data" method="post">
                <input type="file" name="image" class="browseimage">
            </form>
            <li class="browseimage-fake btn btn-success btn-sm">Choose File</li>

js

$('.article-create .table').on('click', '.browseimage-fake', function() {
    $(this).closest('td').find('.browseimage').click();

    $(this).closest('td').find('.browseimage').change(function(){
        alert('change');

        // check FormData and ajax ..
    });
});

Answer 1

Try this code. Alert calls just one time:

$(document).on('change', '.browseimage', function(){
    alert('change');
    // check FormData and ajax ..
});

http://jsfiddle.net/E9mPw/20/

Answer 2

simple JQUERY change function.

$(".browseimage-fake").change(function() {
console.log("changed")
});

Answer 3

This code worked for me but only when I had a valid url for the action attribute of the form.

<script>
    $(".browseimage").change(function () {
        document.forms[0].submit();
    });
</script>