CODEWITHSUNDEEP
javascriptphpjqueryajaxcodeigniter
Archer
Archer

Reputation: 1162

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

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!!

Upvotes: 0

Views: 835

Answers (3)

Obi Dennis Chizolu
Obi Dennis Chizolu

Reputation: 108

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!

Upvotes: 1

MD. Jahidul Islam
MD. Jahidul Islam

Reputation: 655

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.

Upvotes: 1

Manish Jangir
Manish Jangir

Reputation: 5437

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.

Upvotes: 1

Related Questions