通过ajaxform上传文件不起作用

Question

I am trying to upload an image through an AJAX call (& PHP). I am using ajaxform plugin to do so but, apparently when I submit the form the "file" input value is not being passed to the php script. Here is my HTML & JS:

<form action="upload_file.php" method="post" enctype="multipart/form-data" id="select-image">
    <input type="file" name="image" size="30"/> <input type="submit" name="upload" value="Upload" />
</form>

<script>
    var options = { 
        success:       showResponse  // post-submit callback 
    }; 

    // bind form using 'ajaxForm' 
    $('#select-image').ajaxForm(options); 

    // post-submit callback 
    function showResponse(responseText, statusText, xhr, $form)  {       
        alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
            '\n\nThe output div should have already been updated with the responseText.'); 
    } 
</script>

And for testing upload.php contains:

<?php
if(isset($_POST['upload'])){
    var_dump($_FILES);
}
?>

When, I submit the form all I get back is:

Array(
    [image]=>
)

Am I doing something wrong? Can I even upload image through Ajaxform plugin? Suggestions please.

Thanks.

Answer 1

Try to add 'cache : false' in var options.

var options = { 
  cache : false,
  success: showResponse  // post-submit callback 
}; 

Works for me.