Ajax image upload from html file to codeigniter controller - blank $_FILES array

Question

I have a html file with an image upload form

<form name="logo_photo" id="logo_image_form" enctype="multipart/form-data" action="" method="post">
        <input type="file" id="logo_upload" name="uploadfile"/>
</form>

and a jquery script to attemp ajax upload of this form - like this

$(document).ready(function (e) {
    $("#logo_upload").on('change',  function(event){            
        $("#logo_image_form").submit();         
        event.preventDefault();
    });

    $("#logo_image_form").on('submit', function(event){

            event.preventDefault()
        $.ajax({
            type:'POST',
            url: serverUrl+"uploadController/imageuploadAction",
            data:$(this).serialize(),
            cache:false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });




        return false;
                event.preventDefault();
    });
});

and the controller in the codeigniter framework, simply has a small test return, like this -

function imageuploadAction() {
    //testing controller

    print_r($_FILES);
}

but the return is an empty array. i want to be writing more code to check and upload the image, like performing tests on $_FILES['uploadfile']['tmp_name'] but $_FILES seems to be empty.

What am i missing on this? Any help will be appreciated, Thanks!!

Manish Jangir · Answer 1 · 2014-01-03T05:39:23.153

1

File upload is not possible through $.ajax. You can use Iframe or xmlhttprequest version 2 to do that.

The best jquery plugin I've see ever for uploading files through ajax is jquery.form.js. This works in all browsers and uses xmlhttprequest 1.

You can use it in a very efficient way.

edited Jan 03 '14 at 05:39

answered Jan 03 '14 at 05:17

Manish Jangir

5,329
4
42
75

Thanks for the suggestion, trying out xmlhttprequest now. Btw, what is the differences of using iframe of xmlhttprequest? like, any old browser issues!!? – Archer Jan 03 '14 at 05:27
Updated the answer again. – Manish Jangir Jan 03 '14 at 05:39
In Iframe you have to make a form virtually and then pass your original form data to virtual form and submit it to internally. – Manish Jangir Jan 03 '14 at 05:41
Not true at all. You can upload using $.ajax. – Ray Nicholus Jan 03 '14 at 12:41
@RayNicholus could you please explain how?? Actually i did not find anything related to it. – Manish Jangir Jan 03 '14 at 12:43
Use the search box at the top of this page for more info. – Ray Nicholus Jan 03 '14 at 12:44

score 1 · Answer 2 · answered Jan 03 '14 at 06:07

In general you will be not permitted to get the information about files in $_FILES Array.

But you can do it using a simple script

please follow the below pattern :

 $.ajax({
         url: url,  
         type: 'POST',
         dataType: 'json',
         xhr: function() {  // Custom XMLHttpRequest
              var myXhr = $.ajaxSettings.xhr();
              if(myXhr.upload){ // Check if upload property exists
              //if you want you can add any progressbar event trigger here      
              }
              return myXhr;
         },
         //Ajax events
         success: function (data) {

         },
         data: formData,
         //Options to tell jQuery not to process data or worry about content-type.
     cache: false,
     contentType: false,
     processData: false
     });

I think you can now get all the required data in your $_FILES global variable.

score 1 · Answer 3 · answered Jul 16 '17 at 07:39

I will suggest you include another form field like a redundant hidden text Input to your form and try it again

<form name="logo_photo" id="logo_image_form" enctype="multipart/form-data" 
action="" method="post">
    <input type="text" name="name" value="name" hidden />
    <input type="file" id="logo_upload" name="uploadfile"/>
 </form>

It looks funny, but try it and see!

Ajax image upload from html file to codeigniter controller - blank $_FILES array

3 Answers3