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

Question

I am searching for a simple client-side script to upload a file using ajax. Searching for the web for this script only brought up a lot of plugins with multi-features. I don't need multi-feautres - just to be able to upload it as simple as possible using ajax

Is it possible to write something simple as:

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

If it is possible - how should I write it right ( $('#uploadInput').val() won't give me the right directory path - so what do I need to do to pass the location using Ajax).

aside from that - in order to get drag&drop for files - Is there a simple script for that or do I need to use plugin (and is there a really tiny and simple one without multi-features)

Answer 1

You can't use AJAX to upload files (unless the clients browsers supports the HTML 5 element, which allows access to the file object.).

Your solution is to fake it

create a 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 target of the frame for 'results_frame', we'll define it after the form in the 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 capture the file as -

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

Once you've done your manipulating with the file, you can make an echo whatever information you want, including refreshing the initial form at this point.

Answer 2

You could achieve this using some HTML5 features such as the File API (take a look at the Example: Uploading a user-selected file section in this article).

But if you want cross browser solution I would recommend you using a client side upload plugin. For example the jQuery form plugin is quite easy to setup. Valums Ajax upload is also very nice. It provides many functionalities such as drag and drop and upload progress but if you don't care about them, they can be easily turned off.

Answer 3

On modern browsers you can use the new xhr2 (see http://www.html5rocks.com/en/tutorials/file/xhr2/ ) to perform a neat AJAX file upload ... including progress bar. I don't really know if this has already been embedded into the latest jQuery. Maybe someone else can shed some light on that.

Answer 4

Uploadify is another great solution for ajax upload. Its

• extremely easy to setup,
• very stylish, and
• cross broswer .

See demos

Answer 5

If you want to make a ajax uploader that works in all moderns 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 grab the content from the form, you can't put the information in GET. URLs can maximum be 2000 (?) characters long, so uploading a bigger file will cause the upload to crash. You need to send this using POST.

Btw, I've had some good experience with this plugin: http://valums.com/ajax-upload/ . It is pretty simple, so you can customize it like you want (with some basic jQuery/js experience).

Hope it helps.