AJAX Submit Form.. data not sending

Question

Hi,

I have been battling with this piece of code for literally days now... Would appreciate any help

The script calls the php file without a problem when the submit key is hit. However, it doesnt post the form data with it.

The HTML form

<form id="image_form" name="image_form" method="POST"

action="" enctype="multipart/form-data"> File:

The Javascipt

$(function() {
$(".submit").click(function() {
  var obj = document.getElementById("form_div");
  var load = document.getElementById("load");
   jQuery.ajax({
    type: "POST",
    name: "image",
    url: "upload_imagel.php",
    enctype: "multipart/form-data",
    beforeSend: function(){
     obj.style.display = 'none';
     load.innerHTML = "<img src='../images/misc/ajax-loader.gif'

/>"; }, error: function(){ alert('Error has occured'); }, timeout:5000, success: function( results ){ load.style.display = 'none'; obj.style.display = 'block'; } }) return false; }); });

The PHP

The following is then empty

$image=$_FILES['image']['name'];

Thanks in advance

---

Thanks to pekka I changed the following AJAX to

$(document).ready(function() { 
    var obj = document.getElementById("form_div");
    var load = document.getElementById("load");

    var options = { 
        beforeSend: function(){
             obj.style.display = 'none';
             load.innerHTML = "<img src='../images/misc/ajax-loader.gif' />";
            },
        success: function(){
             load.style.display = 'none';
             obj.style.display = 'block';
            },
        type:      'POST', 
        timeout:   5000 
    }; 

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

However still getting the same problem

$image=$_FILES['image']['name'];

Still empty :(

P.s. html form heading is now

<form id="image_form" method="POST" action="sMain/upload_image_small.php" enctype="multipart/form-data">

Am I missing something?

Thanks

Answer 1

It's not possible to do file uploads using AJAX, because your script will not get read access to a file on the client machine.

You could take a look at the jQuery form plugin that uses an invisible iframe to achieve this.

Answer 2

You could try using Plupload (http://www.plupload.com). It has a lot of features and works well for file uploads.

Answer 3

It does work Pekka, had a typo in my php file. So annoying.

Thanks.. also came across this through a different forum

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

Thanks to you both for your help.