Question

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 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?

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.