Image isn't posting while using e.preventDefault() in jquery ajax

Question

I got some wired problem while posting a form using jquery ajax. i have a multiple image upload field. while i use e.preventDefault() function the images aren't uploading. but while i disable this code. it remains fine. here is my code snippet for markup, js and php

HTML

<form class="shoform" id="contact-entry" name="contact-entry" action="project-up-eng.php" method="post" enctype="multipart/form-data">
<input class="pic" id="img" type="file" multiple="multiple" name="imgfile[]" />
<input class="submitbtn" id="submitbtn" type="submit" value="Add"></input>
</form>

JS

$("#submitbtn").click(function(){


        $("#contact-entry").submit(function() {
        /* Act on the event */

        e.preventDefault();
        $.post('project-up-eng.php',$(this).serialize(), function()
                        {
                        alert("OK");


                    });

    }); 

});

PHP:

mkdir("projects/".$_POST['name']);
$path="projects/".$_POST['name'];
for($i=0;$i<count($_FILES['imgfile']['size']);$i++)
{
$file = $path."/".$_FILES['imgfile']['name'][$i];
move_uploaded_file($_FILES['imgfile']['tmp_name'][$i],$file);   

}

holy god i will use `sdfhl467457jksdfsdfjksfkdkdjkdkhdgkgjdhkjlgdhsklgjdhsgjkdhsfjkghk` as file name :D — NullPoiиteя, Oct 07 '13 at 05:37
see this :: http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — Sudhir Bastakoti, Oct 07 '13 at 05:38

score 4 · Accepted Answer · edited May 23 '17 at 10:25

4

Unfortunately, you can not submit forms with files over AJAX with classic HTML. When you call e.preventDefault(), the regular file upload is not performed, and your $.post you call manually is just unable to do what you want.

You can upload with JavaScript in new browsers with new HTML 5 functionality. See "How can I upload files with AJAX".

edited May 23 '17 at 10:25

Community

1
1

answered Oct 07 '13 at 05:36

Denis

5,061
1
20
22

you could have added this as comment..! – Sudhir Bastakoti Oct 07 '13 at 05:37
this is the sad truth. – sevenseacat Oct 07 '13 at 05:37
@user2853358 Yes it does. Please note that it only works in new browsers, though. – Denis Oct 07 '13 at 06:01

score 0 · Answer 2 · answered Oct 07 '13 at 05:45

You do not mention on which element you want to disable default event functionality.

Currently, there is two element #submitbtn and "#contact-entry"

If you want to prevent #submitbtn then

$("#submitbtn").click(function(e){  // just check e in the bracket

        e.preventDefault();
        $("#contact-entry").submit(function() {
        /* Act on the event */

//        e.preventDefault(); this line removed
        $.post('project-up-eng.php',$(this).serialize(), function()
                        {
                        alert("OK");


                    });

    }); 

});

If you want to prevent #contact-entry then

$("#submitbtn").click(function(){

        $("#contact-entry").submit(function(e) { // just check e in the bracket
        /* Act on the event */

       e.preventDefault(); 
        $.post('project-up-eng.php',$(this).serialize(), function()
                        {
                        alert("OK");


                    });

    }); 

});

The correct solution is obviously that you can't upload files via ajax that easy (seen Senis's answer) - so, whatever you're suggesting to change here, it's useless. — oezi, Oct 07 '13 at 05:50
You need to use http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/ and use second approach — Parag Kuhikar, Oct 07 '13 at 06:12

Image isn't posting while using e.preventDefault() in jquery ajax

2 Answers2

Linked