How to upload file to server using ajax (jQuery)?

Question

JavaScript

I've been sitting for three hours now and I can't do the following thing: there is a form for uploading a file

and a button.


I need it so that when you select a file and click "send", the file is uploaded to the server without reloading the page.

Everywhere they write about the ajaxupload plugin. I found a couple of descriptions of how this plugin works, but I just can't get it to work.

Here is an example: code.google.com/p/ajax-upload
At first glance, everything is quite simple, but it does not want to work in any way. And it’s not that the file just wasn’t uploaded, but parts of the code in the onSubmit and onComplete functions also don’t work. I can't even figure out if the script is working at all or not.

And this line is confusing:
$("#UploadButton").ajaxUpload({
Here UploadButton is the ID of the button on click on which the file upload event is triggered? Or this whole code should be placed in the button click event handler: $("#send").click(function(e )

{ ... It all starts with creating an object new AjaxUpload('imageUpload', { but again, it's not clear "imageUpload'" - what is it? The description says: First we attach the the AjaxUpload behavior to our file form element. That is, imageUpload is the identifier of the form file, in our case "myfile"? And it turns out that I must again place all this code in the button click handler? And the last question: Where can I download the latest version of this plugin. For example, here

code.google.com/p/ajax-upload , I can't even figure out if this version is up to date or not. ajaxupload-v1.2.js

Answer 1

mailru.github.io/FileAPI/#en/started

Answer 2

jQuery Form Plugin