Two minutes to learn Ajax File upload

If we have read/seen it somewhere that ” File upload using Ajax”, then it is not through AJAX. File uploading is basically done through an iframe in this case. We have to use an iframe to upload the files. Honestly speaking implementing javascript code using an iframe is quiet difficult for a beginner. In that case, I would like to introduce jquery form plugin, please see the below description how it makes our job very simple.

While working with forms submit using an Ajax request(without page reload) , might have marked that we actually collect all the datas from the input fields, validate it, serialize or do not serialize is an option and then send the data to the server.

On the otherside, server collects the data processes it and sends the output may be in a different format (JSON, XML, Text/HTML). After that on the basis of the data received from the server we update/modify the web page creating a feel for the user that the form was submitted but which didn’t happened indeed.

Now, lets move to form with enctype=”multipart/formdata”, to upload a file using ajax. File uploading using AJAX is not possible. AJAX doesn’t actually post forms to the server, it sends selected data to the server in the form of a POST or GET request. As javascript is not capable of grabbing the file from the users machine and sending it to the server, it’s just not possible with AJAX. We have to resort to regular old form submit.

If you have read/seen it somewhere, then it is not through AJAX. File uploading occurs through an iframe in this case. We have to use a iframe to upload the files. As mentioned in the description implementing javascript code using an iframe is quiet difficult for a beginner. So, lets quickly solve this problem with the help of form plugin.

Please follow the following steps to upload a file:-

Step 1: Create a folder called “ajax_file_upload” in your test folder and create an html file named “file_upload.html” with the code exactly given below

    
        

         
        
        
            function form_submit() {
                return false;
            }
            function showRequest() {
                alert("form going to be submitted");
            }
            function showResponse(data) {
                alert(data);
            }
            $(document).ready(function() {
                var options = {
                    url:        'fileupload.php',
                    beforeSubmit:  showRequest,
                    success:    showResponse
                };
                $('#myForm').submit(function() {
                    // inside event callbacks 'this' is the DOM element so we first 
                    // wrap it in a jQuery object and then invoke ajaxSubmit 
                    $(this).ajaxSubmit(options); 
             
                    // !!! Important !!!
                    // always return false to prevent standard browser submit and page navigation 
                    return false;
                });
            });
        
    
    
        |
            
            
        
    


Step 2: Create your PHP file using the below code:

Mark we are getting $_FILES on the server-side and we can perform all kind of operations like(checking file size, file type etc) and echo the output in any form we require.

Step 3: Create a "temp" folder inside the "ajax_file_upload" which is our present directory and please do not forget to give it permissions.

Step 4: Use this link "http://localhost/test/ajax_file_upload/file_upload.html" to access the files. Upload a file. If the file gets successfully uploaded then we will get an alert or also if file already exists.