Image is not uploading using jquery in codeigniter

Question

I am trying to upload the image to the folder in codeginter using jquery. But I am not able to get what is the exact issue why the image is not getting upload and showing me message

You did not select a file to upload.

I am not able to get why the file is not selected to upload here. Her is my php code

public function add_new_book()
    {

    $image = $this->input->post('bookfile');
    $img=$this->input->post('bookfile');
    $config['upload_path'] = '/uploads'; 
    $config['overwrite'] = 'TRUE';
    $config["allowed_types"] = 'jpg|jpeg|png|gif';
    $config["max_size"] = '1400';
    $config["max_width"] = '1400';
    $config["max_height"] = '1400';
    $this->load->library('upload', $config);

    if(!$this->upload->do_upload('bookfile')) 
    {               
        $this->data['error'] = $this->upload->display_errors(); 
        echo json_encode(array("result"=>$this->data['error']));
        exit;
    } 

    }

And I write jquery code here

$( document ).ready(function() { 
     $("#btnsavebook").click(function(){ 

if($("#bookfileid").val() != ''){
        if (typeof FormData !== 'undefined') {

    var formData = new FormData($("#form-upload")[0]);
    console.log("formdata:",formData)
    $.ajax({
      type: "POST",
      url: "CreateBook/add_new_book",
      data: formData,
      mimeType:"multipart/form-data",
      dataType: 'json',
      xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
      },
      cache:false,                    
      contentType: false,
      processData: false,
      success: function(result){ 
      }                       
    }); 
   } } 
});});

Anybody please tell me how can I achieve this process??

Thanks

check out my solution for this case , http://stackoverflow.com/questions/40582426/getting-error-while-uploading-image-via-ajax/40583329#40583329 it i will helps you sure , just make it single image upload from my case . — Amit Chauhan, Nov 18 '16 at 10:24
$img=$this->input->post('bookfile'); this line can influent $_FILES, maybe delete it. Also check with echo json encode what is in $_FILES. — cssBlaster21895, Nov 18 '16 at 11:33

score 0 · Answer 1 · answered Nov 25 '16 at 09:55

Try this

View file

    <html>
<head>
<title>Ajax Image Upload Using PHP and jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="my_image" id="my_image" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
<h4 id='loading' >loading..</h4>
<div id="message"></div>
</body>
</html>
<script type="text/javascript">

$(document).ready(function (e) {
$("#uploadimage").on('submit',(function(e) {
e.preventDefault();
$("#message").empty();
$('#loading').show();
$.ajax({
url: "<?php echo base_url('test/hello'); ?>", // Url to which the request is send
type: "POST",             // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false,       // The content type used when sending data to the server.
cache: false,             // To unable request pages to be cached
processData:false,        // To send DOMDocument or non processed data file it is set to false
success: function(data)   // A function to be called if request succeeds
{
$('#loading').hide();
$("#message").html(data);
}
});
}));
});
</script>

Controller

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Test extends CI_Controller {

    public function __construct ()
    {
        parent::__construct();
    }

    public function index()
    {
        $this->load->view('test');
    }

    public function hello()
    { 
        // print_r($_FILES['file']); die;
        $config['upload_path']        = 'uploads';
        $config['allowed_types']        = 'gif|jpg|png|jpeg'; // allowed file formats
        $this->load->library('upload', $config);
        if ( ! $this->upload->do_upload('my_image')) 
        {
            echo $this->upload->display_errors(); // It will return errors if file not uploaded
        }
        else
        {
            echo "uploaded";
        }
    }
}

Source : https://www.formget.com/ajax-image-upload-php/

Image is not uploading using jquery in codeigniter

1 Answers1