File upload and send textbox data using AJAX HTTP POST

Question

I have one HTML form where I enter the Text fields and finally upload a image file into the server. (HTML file:<input type="file" name="filename"/ >) I use Ajax technique and HTTP POST request to perform this task.

But I'm unable to upload file but can see the text filed values in database.I'm trying to upload image file into a folder using getimagesize($_FILES['filename']['tmp_name']and move_uploaded_file() to move from temp folder to specific folder.

FirePHP is showing the warning message as : getimagesize() [function.getimagesize]: Filename cannot be empty in my .php file on line 19

line 19 contains the getimagesize() statement.

Could anybody please let me know is it possible to upload a file using ajax technique?or any other better way to do this?

Any help is greatly appreciated.

Answer 1

I will give you three basic ways to work on AJAX-based file uploads..

1) Faking AJAX-based file uploads - You'd create an iframe on the page (that you can hide with CSS), you can target your form to POST to that iframe.

<form target='upload_target' id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
    <input name="file" id="file" size="27" type="file" /><br />
    <input type="submit" name="action" value="Upload" /><br />
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;display: none;"></iframe>
</form> 

2.) FILE API: if your browser supports it, you can use the sophisticated FILE API to do what I'll call a Pure AJAX file upload - https://developer.mozilla.org/en/using_files_from_web_applications

3) You can use existing JQuery plugins such as Ajax File Upload and Multiple File Upload . Please do look up more such from the JQuery site, evaluate for cross-browser compatibility and use.