Show loading image while its uploading?

Question

I have an image upload form, which auto uploads the image when user selects the file.

Upload form

<form id="imageupload" action="./uploadres.php" enctype="multipart/form-data" method="post">
<input type="file" name="file" value="Ekle" accept="image/*" size="20">
</form>

Auto upload script when user selected file

$("input[name='file']").change(function() {

this.form.submit(); 

});

Show/hide loading image function:

$('#loadimg').show();
$('#contents').load(function(){
$('#loadimg').hide();
});

What I am trying to do is showing loading image while its uploading. What is the correct way to integrate the Show/hide loading image method into my form submit ?

Is the upload done with XHR or POST? – Halcyon Jun 08 '14 at 01:13 — Halcyon, Jun 08 '14 at 01:13

score 2 · Answer 1 · edited May 23 '17 at 10:26

2

If you are doing a full HTML post, then you only have one option:

Using the form's onsubmit event to display the uploading symbol. This will be cleared when the new HTML is downloaded.

On the other hand, if you are using jQuery to submit the form, there are a several excellent ways to handle that.

I'd point you to this discussion for an overview.

edited May 23 '17 at 10:26

Community

1
1

answered Jun 08 '14 at 01:27

Jeremy J Starcher

21,760
5
48
70

File uploads are trickier than regular `POST`s. The discussion you linked is only about regular `POST`. – Halcyon Jun 08 '14 at 16:53
The discussion I linked to what about using an `ajax` post. – Jeremy J Starcher Jun 08 '14 at 18:16
Yes, for a form that doesn't have file inputs. `$.ajax` doesn't support file inputs (because it can't, on older browsers). – Halcyon Jun 08 '14 at 18:48

Show loading image while its uploading?

1 Answers1