PHP jQuery .ajax() file upload server side underst

Question

I have an HTML form that previously was only used for text attributes for users, that was all using AJAX to call a PHP controller functions via URLs to refresh page content via database and server-side calls (abridged version)

 <input type="text" id="firstname" name="FIRSTNAME"/>
 <input type="text" id="lastname" name="LASTNAME"/>
 <input name="Submit"type="submit" value="Submit" />

This "create user" form now needs to incorporate a file uploading mechanism, for user images

 <input type="file" name="userImage" />

The problem is that the form is being submitted via .serialize in the .ajax #create form submit

        $.ajax({
            url: 'controller.php?command=create',
            type: 'POST',
            data: $( form ).serialize(),

create URL calls the PHP controller echo $dmv->create(); , which is the model public function create(){ //execute database insert and execute

I have read that serialize does not make sense for files, which is true, but I also want to try to figure out how to update my existing form to incorporate file upload functionality to it

I have tried to understand the jquery.form.js plugin ( http://malsup.com/jquery/form/#file-upload ) but cannot understand how to tie it all together.

I believe what I need to do is have the file upload execute as a separate logic, then tie back with the original logic for file name , this is file storage with the unique image name stored in the database under the record, not BLOB image storage.

Let me know if I can provide any further info, and thanks to any help that can be given.

Answer 1

Here is a example of what Michael is talking about. http://www.phpletter.com/Our-Projects/AjaxFileUpload/

Answer 2

You can mimic an AJAX call by using a hidden iframe. You can even achieve a callback function and get the server response just like an AJAX call:

HTML --

<form enctype="multipart/form-data" target="workFrame"></form>
<iframe id="workFrame" style="display:none;"></iframe>

JS--

//bind an event handler to the form with the file input
$('form').on('submit', function () {

    //check to make sure the user has selected an image, if not then stop the form from submitting
    if ($('#userImage').val().length == 0) return false;

    //bind an event handler to the `load` event for the iframe so we will have a callback for the form submission
    $('#workFrame').on('load', function () {
        var $this = $(this);

        //remove this event handler
        $this.off('load');

        //get the response from the server
        var response = $this.contents().find('body').html();
        //you can now access the server response in the `response` variable
    });

    //return true so the form submits normally
    return true;
});

Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.

Answer 3

You can't upload files via AJAX. The only possibilites you have are using Flash (such as Uploadify: http://www.uploadify.com/), an iFrame, or just submitting the form. The form must have an enctype set to multipart.

<form action="script.php" method="post" enctype="multipart/form-data">

Plugins may mimic AJAX file uploads by creating a "hidden" iframe. Example: http://valums.com/ajax-upload/