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 Do not hesitate to ask mare explications if needed. — Demian Flavius
– Demian Flavius, Commented Mar 15, 2013 at 8:07

Anthony Grist · Accepted Answer · 2013-02-05 11:11:42Z

1

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.

answered Feb 5, 2013 at 11:11

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhinav Joshi Over a year ago

No that doesnt fix it although i hadn't noticed that either... anything else i may have missed?

bipen · Accepted Answer · 2013-02-05 11:12:14Z

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 5, 2013 at 11:12

bipen

36.6k9 gold badges51 silver badges62 bronze badges

1 Comment

Anthony Grist Over a year ago

According to the plugin documentation it supports file uploads, likely using an <iframe> in the background when necessary.

Aditya Jain · Accepted Answer · 2013-02-05 11:12:59Z

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 5, 2013 at 11:12

Aditya Jain

1,0951 gold badge12 silver badges25 bronze badges

Comments

nrsharma · Accepted Answer · 2013-02-05 11:13:54Z

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 5, 2013 at 11:13

nrsharma

2,5724 gold badges21 silver badges36 bronze badges

Collectives™ on Stack Overflow

Uploading form via ajax using jquery form plugin

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related