Uploading form via ajax using jquery form plugin

Question

I am trying to upload the following form

<form id="filesend" enctype="multipart/form-data" method="post" action="upload.php"> Choose the file you want to send <br> <input name="file" type="file"><br><input type="submit"></form>

using the following jquery code

<script>
$('document').ready(function() { 
var options= { target:'#close'}
$('#filesend').submit( function (){
$(this).ajaxSubmit(options);
          return false;         
})})
</script>

but nothing happens and the form submits like a normal html form and navigates to upload.php and yes I have included the plugin. Any ideas as to where I might be going wrong.

Edit

I just noticed something intresting. If i go through chrome's debugger and watch every step of the execution the file gets uploaded to the database twice. But going through it without any breakpoints results in it only being uploaded once.

It is possible, here is my solution: [http://stackoverflow.com/questions/581703/how-to-do-a-asp-net-mvc-ajax-form-post-with-multipart-form-data/13522052#13522052](http://stackoverflow.com/questions/581703/how-to-do-a-asp-net-mvc-ajax-form-post-with-multipart-form-data/13522052#13522052) Do not hesitate to ask mare explications if needed. — Demian Flavius, Mar 15 '13 at 08:07

score 1 · Answer 1 · answered Feb 05 '13 at 11:11

The problem is with this part:

$(#filesend).submit( function (){
    $(this).ajaxSubmit(options);
    return false;         
})

The selector should be a string, so: $('#filesend') - note the single quotes (you can also use double quotes).

Without them it's trying to pass the value of the variable named #filesend to the function; I'm not sure that's a valid variable name, so it would probably throw an error - checking your browser's developer tools console would tell you if an error had been thrown because of it.

No that doesnt fix it although i hadn't noticed that either... anything else i may have missed? — Abhinav Joshi, Feb 05 '13 at 11:33

score 1 · Answer 2 · answered Feb 05 '13 at 11:12

1

File upload is NOT possible through ajax. You can upload file, without refreshing page by using IFrame. you can check further details here:

http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

With XHR2, File upload through AJAX is supported. for example through FormData object, but unfortunately it is not supported by all/old browsers.

answered Feb 05 '13 at 11:12

bipen

36,319
9
49
62

1

According to the plugin documentation it supports file uploads, likely using an `` in the background when necessary. – Anthony Grist Feb 05 '13 at 11:41

score 0 · Answer 3 · answered Feb 05 '13 at 11:12

0

I don't think you can submit files using Ajax. JQuery based file upload plugins allows you to 'nicely' show the file upload input box.

answered Feb 05 '13 at 11:12

Aditya Jain

1,077
1
12
25

score 0 · Answer 4 · answered Feb 05 '13 at 11:13

0

There is syantax problem in your code

look closer here

$('#filesend').submit( function (){
$(this).ajaxSubmit(options);
          return false;         
})});

The selector needs to windup ins string i.e. '#filesend'.

answered Feb 05 '13 at 11:13

nrsharma

2,532
3
20
36

Uploading form via ajax using jquery form plugin

4 Answers4