How to upload a file with a simple jquery-ajax call

Question

I am looking for a simple client side script to download a file using ajax. An Internet search for this script has led to the emergence of many plugins with several features. I don't need multi-feautres - just to download it as simple as possible using ajax

Is it possible to write something simple:

$.get('server/upload.php?file = ' + $('#uploadInput').val(), function(data) { $('.result').html(data); }); 

If possible - how should I write correctly ( $('#uploadInput').val() will not give me the correct directory path - so I need to do this to transfer the location using Ajax).

besides this - in order to get drag & drop for files - is there a simple script for this or do I need to use a plugin (and is there really tiny and simple without multi-functions)

Answer 1

You cannot use AJAX to download files (unless client browsers support the HTML 5 element, which allows access to the file object.).

Your decision should fake it

create form element

 <form id="myForm" action="upload.php" method="POST" target="results_frame"> <input name="fileUpload" type="file" /> <input type="submit" value="Submit" /> </form> 

We set the frame target for 'results_frame', we define it after the form in HTML as an empty iframe.

 <iframe id="results_frame" name="results_frame" style="display:none;"></iframe> 

Then in the backend in your php file you can write the file as -

 $_FILE['file']['param']; //where param accepts multiple values //such as name, type, size, error, and tmp_name 

After you have processed the file, you can echo any information that you need, including updating the initial form at this point.

Answer 2

You can achieve this by using some HTML5 features, such as the File API (see Example: Loading a custom file section in this article).

But if you want to use a cross browser, I would recommend that you use the client-side download plugin. For example, the jQuery form plugin is pretty easy to set up. Valums Ajax upload is also very nice. It provides many features such as drag and drop, but if you don’t care, you can easily turn them off.

Answer 3

In modern browsers, you can use the new xhr2 (see http://www.html5rocks.com/en/tutorials/file/xhr2/ ) to do an accurate download of the AJAX file ... including a progress bar, I really don't know if it is already built into the latest jQuery. Maybe someone else can shed some light on this.

Answer 4

Uploadify is another great ajax download solution. His

• extremely easy to set up,
• very stylish and
• cross broswer .

See demos

Answer 5

If you want to make an ajax loader that works in all modern browsers, you should check out some jQuery plugins. Check out this article, for example: http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/ .

What you suggested in your first post will not work. Even if you take the content from the form, you cannot put this information in the GET. URLs can be longer than 2000 (?) Characters, so downloading a larger file will cause the download to fail. You need to send this using POST.

By the way, I had good experience with this plugin: http://valums.com/ajax-upload/ . It's pretty simple, so you can configure it the way you want (with some basic jQuery / js experience).

Hope this helps.