jqueryajaxcodeigniter

uploading csv file using jquery ajax and codeigniter


here i want upload and move the csv file using jquery ajax function.

$("#file").change(function() { 
  alert($("#file").val());
  $.ajax({
    url: "<?php echo base_url(); ?>index.php/Task_controller/upload_tasksquestion",
    type: "post",
    dataType: 'json',
    processData: false,
    contentType: false,
    data: {file: $("#file").val()},
    success: function(text) {
        alert(text);
        if(text == "success") {
            alert("Your image was uploaded successfully");
        }
    },
    error: function() {
        alert("An error occured, please try again.");         
    }
  });   
});

and my html code is:

< input type="file" class="form-control" id="file" name="file">

and i am testing in controller function uploaded file name like $this->input->post('file');

but it is not come to the controller and i want to move that file into a folder. please help me where i am doing mistake...

my server side code is:

$curdate=date('Y-m-d');
$path='./assets/fileuploads/';
$file=basename($_FILES['file']['name']);

list($txt, $ext) = explode(".", $file);
$actual_file_name = time().substr($txt, 5).".".$ext;
if(move_uploaded_file($_FILES['file']['tmp_name'],$path.$actual_file_name))

Solution

  • You need to use FormData to send files over via AJAX.

    Store the file in a FormData object and pass the object as your data.

    $("#file").change(function() {
        var fd = new FormData();
        fd.append('file', this.files[0]); // since this is your file input
    
        $.ajax({
            url: "<?php echo base_url(); ?>index.php/Task_controller/upload_tasksquestion",
            type: "post",
            dataType: 'json',
            processData: false, // important
            contentType: false, // important
            data: fd,
            success: function(text) {
                alert(text);
                if(text == "success") {
                    alert("Your image was uploaded successfully");
                }
            },
            error: function() {
                alert("An error occured, please try again.");         
            }
        });
    });
    

    Read File Uploading Class (particularly from The Controller section) on how to deal with the file on the server-side end.