PHP jQuery .ajax() file upload server side understanding

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.

You cannot upload using ajax calls. The only way to get a ajax feeling is to submit the file onchange using a frame. Then returning the image as result. — Michael, Dec 12 '11 at 22:30
I know how to do this with ajax and javascript (I don't know jquery). would this help? — D. Rattansingh, Dec 12 '11 at 22:40
Yes that would. I guess I am interested in php handling the file upload but the submit still processes the other form values, before or after. I cant wrap my head around how say the results of the jquery form plugin can be used once submitted, or how to finish the file upload with those values — Jay Rizzi, Dec 13 '11 at 00:25

score 1 · Answer 1 · answered Dec 12 '11 at 22:46

1

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/

answered Dec 12 '11 at 22:46

Highway of Life

22,803
16
52
80

I can't upload files via ajax, but is there a way AJAX can call a php script to do the uploading? I have accomplished on multiple occasions being able to submit forms and write files using php, but in this particular instance, since the entire app is all loaded via ajax with php calls, i cannot just refresh the page via usual POST. So not necessarily ajax handling the file upload, but ajax calling the php handler – Jay Rizzi Dec 13 '11 at 00:20
If you're asking if you can submit an AJAX post, call back a PHP script, have it grab the file and upload it is possible, the answer is No. PHP is a backend-processing language, which means that it's going to process something you send to it, and echo (print) any output. It cannot process something outside of that scope. To make your upload work AJAX-like, you'll need to use either Flash or an iframe as mentioned. It mimics AJAX-like functionality without actually being AJAX. (Because you simply cannot upload a file using AJAX) – Highway of Life Dec 13 '11 at 02:12

Jasper · Answer 2 · 2011-12-12T23:03:36.510

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.

score 0 · Accepted Answer · answered Dec 12 '11 at 22:35

0

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

answered Dec 12 '11 at 22:35

jivanrij

157
2
12

This was my reaction on Michael, but i can't seem to react on him. So it's an answer... – jivanrij Dec 12 '11 at 22:37
what is that ?? AjaxFileUpload ??? This link doesnot provide file upload functionality through Ajax, They are making whole post request & refreshing entire page.. – gkd Jul 21 '14 at 13:03

PHP jQuery .ajax() file upload server side understanding

3 Answers3

Linked