How to send an image to server automatically?

Question

I want the user to upload an image to the server without hitting the submit button.

This is my html form:

<form>
    <div class="entry">Upload image<input type="file" formmethod="post" formaction="/avatar_upload"/></div>
</form>

Is it possible to upload the file to the server without using the submit button?

So the question is how to submit a file upload without pressing a submit button? — mbuechmann, Jun 15 '18 at 13:51

score 1 · Accepted Answer · answered Jun 15 '18 at 17:23

1

Try to use onchange event of the input button to fire the save.

answered Jun 15 '18 at 17:23

shmit

2,306
2
16
20

Sorry to ask you, but how exactly should I use it? I suppose I have to make post request in this situation? – MonX94 Jun 16 '18 at 10:26
Sample code in this fiddle – shmit Jun 16 '18 at 14:46
You can also find examples in this stackoverflow discussion https://stackoverflow.com/questions/7231157/how-to-submit-form-on-change-of-dropdown-list – shmit Jun 16 '18 at 14:55

score 0 · Answer 2 · answered Jun 16 '18 at 12:57

Change your markup like this (add id attributes):

<form id="form">
    <div class="entry">Upload image
        <input id="file" type="file" formmethod="post" formaction="/avatar_upload"/>
    </div>
</form>

In Javascript (assuming jQuery is used):

$('#file').on('change', function () {
    $('#form').submit();
});

How to send an image to server automatically?

2 Answers2