Jquery submit function cannot post uploaded document to a php script

Question

Have been trying to post uploaded document alongside other text fields to a php script using jquery's submit function but so far unsuccessful. The text fields are successfully posted. I have no idea what the problem is. PLease assist.

Jquery submit code

    submitHandler: function(form) {

            $.post('bin/insert.php', $("#form").serialize(), 
            function(data) {
              if(data.length > 0 )
              {
                  $('.success_box').fadeIn(800);
                 $('.success_box').html(data);
              }

            });
            }

php script

            if(isset($_POST['save']))
   {
            $upload_dir = "./docs"; 
    $upload_path = $upload_dir."/";
    $userfile_name = $_FILES['image']['name'];
    $userfile_tmp = $_FILES['image']['tmp_name'];
    $userfile_size = $_FILES['image']['size'];
    $filename = basename($_FILES['image']['name']);
    $file_ext = substr($filename, strrpos($filename, '.') + 1);
    $large_image_name  = $filename;
            if($userfile_name==NULL){
    echo "<img src='./warning.png' align='center'>You have not selected a      document to upload";
    exit();
}
}

I get the above error message on posting the form.

You should take a look at http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery/8758614#8758614 — Brice, Feb 05 '14 at 12:29
I should have searched the site @Brice - that link has much more useful information than my brief answer below. — steve, Feb 05 '14 at 12:32

score 1 · Answer 1 · answered Feb 05 '14 at 12:30

AJAX can't be used for uploading files to a server.

There are a few plug-ins that may help including:

http://www.webtoolkit.info/ajax-file-upload.html

Noticed as posting this link and others on the SO link provided above in comments - that page has a good source of info for you.

score 0 · Answer 2 · answered Feb 05 '14 at 12:45

Yes you can upload file suing ajax script. Use the below code

$(document).ready(function(){
        $('form#id').submit(function(event){            
            var formData = new FormData($(this)[0]);
            $.ajax({
                type : "POST",
                url : "bin/insert.php",
                data : formData,
                async :false,
                dataType : 'json',
                success: function(data,status)  {           
                               alert('saved');
                        },
                cache: false,
                contentType: false,
                processData: false
            });             
            event.preventDefault();
        });
    });

On php page try print_r($_POST); print_r($_FILES);

Process these and put into db and move the file to you file locations.

I cant seem to get it work. Have redone everything above but it still cannot post an uploaded file successfully. Please give me more information. thannks in advance — user1863337, Feb 05 '14 at 20:49
@user1863337 please check your firebug or console and let me know what error u r getting — Anish, Feb 07 '14 at 04:19

Jquery submit function cannot post uploaded document to a php script

2 Answers2