0

First of all I'd like to ask that you don't suggest I turn to a jQuery plugin to solve my issue. I'm just not willing to make my app work with a plugin (and it prevents me from learning!)

I have a form with a bunch of fields that I'm passing to my backend via the use of jQuery's $.post() This is what I have as my jQuery function:

 $.post(
    "/item/edit",
    $("#form").serialize(),
    function(responseJSON) {
        console.log(responseJSON);
    },
    "html"
);

This is how I opened my form: 

<form action="http://localhost/item/edit" method="post" accept-charset="utf-8" class="form-horizontal" enctype="multipart/form-data">

This was auto generated by codeigniter's form_open() method (hence why action="" has a value. Though this shouldn't matter because I don't have a submit button at the end of the form)

Within my #form I have this as my file input: <input type="file" name="pImage" />

When the appropriate button is hit and the $.post() method is called, I have my backend just print the variables like so: print_r($_POST) and within the printed variables the 'pImage' element is missing. I thought that maybe files wouldn't come up as an element in the array so I went ahead and just tried to upload the file using this codeigniter function: $this->upload->do_upload('pImage'); and I get an error: "You did not select a file to upload."

Any idea as to how I can overcome this problem?

Zaki Aziz
  • 3,592
  • 11
  • 43
  • 61
  • 3
    You can't send a file through ajax, and, files aren't available in post date, they're available in `$_FILES` data. – Ohgodwhy Nov 13 '12 at 21:20
  • http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery – spex Nov 13 '12 at 21:27

3 Answers3

1

You cannot post an image using AJAX, i had to find out here as well PHP jQuery .ajax() file upload server side understanding

Your best bet is to mimic an ajax call using a hidden iframe, the form has to have enctype set to multipart/formdata

Community
  • 1
  • 1
Jay Rizzi
  • 4,196
  • 5
  • 42
  • 71
0

Files wont be sent to server side using AJAX One of the best and simplest JQuery Ajax uploaders from PHP LETTER

all you need is include js in your header normally and Jquery code will be like below

$.ajaxFileUpload({

    url:'http://localhost/speedncruise/index.php/snc/upload/do_upload',

    secureuri:false,
    fileElementId:'file_upload',
    dataType: 'json',
    data    : {
        'user_email' : $('#email').val()
    },
    success: function (data, status) {
      //  alert(status);
       // $('#avatar_img').attr('src','data');
       
    }
    ,
    error: function (data, status, e) {
        console.log(e);
    }
});

wish this can help you

Community
  • 1
  • 1
Ahmed Gaber
  • 707
  • 1
  • 10
  • 27
0

I can't do this with codeigniter and Ajax, I pass the image to base64 and in the controller I convert into a file again

//the input file type
<input id="imagen" name="imagen" class="tooltip" type="file" value="<?php if(isset($imagen)) echo $imagen; ?>">

//the js
$(document).on('change', '#imagen', function(event) {
  readImage(this);
});

function readImage(input) {
    var resultado='';
    if ( input.files && input.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
            //console.log(e.target.result);
            subirImagen(e.target.result);
        };       
        FR.readAsDataURL( input.files[0] );
    }
}

function subirImagen(base64){
    console.log('inicia subir imagen');
    $.ajax({
        url: 'controller/sube_imagen',
        type: 'POST',
        data: {
            imagen: base64,
        }
    })
    .done(function(d) {
        console.log(d);
    })
    .fail(function(f) {
        console.log(f);
    })
    .always(function(a) {
        console.log("complete");
    });
}

//and the part of de controller
public function sube_imagen(){
    $imagen=$this->input->post('imagen');
    list($extension,$imagen)=explode(';',$imagen);
    list(,$extension)=explode('/', $extension);
    list(,$imagen)=explode(',', $imagen);
    $imagen = base64_decode($imagen);
    $archivo='archivo.'.$extension;
    file_put_contents('imagenes/'.$archivo, $imagen);
    chmod('imagenes/'.$archivo, 0777); //I use Linux and the permissions are another theme
    echo $archivo; //or you can make another thing
}

ps.: sorry for my english n_nU

clairerb6
  • 99
  • 8