Come caricare automaticamente qualsiasi immagine quando l'utente sceglie le immagini senza inviare?

Question

Sto creando la possibilità di caricare automaticamente le immagini con Codeigniter e jquery Ajax. Gli utenti selezioneranno le loro immagini dal loro computer e quindi Ajax invierà al server da Post.

Problema: immagini non potevano essere caricati su server e dopo Ajax risposto ho ricevuto una proprietà un'immagine vuota. Sembra che il mio modulo non possa essere valido ma non riesco ancora a trovare la soluzione.

Risultato: Dopo Ajax ha risposto miei res variabile non può ottenere tutti i dati.

Ecco il mio controller

public function upload() { 

     $this->load->helper(array('form', 'url')); 
     $config['upload_path'] = './uploads/'; 
     $config['image_library'] = 'gd2'; 
     $config['allowed_types'] = 'gif|jpg|png'; 
     $config['max_size'] = '100'; 
     $config['max_width'] = '1024'; 
     $config['max_height'] = '768'; 
     $this->load->library('upload', $config); 
     $token = $this->security->get_csrf_hash(); 
     $data = array(); 
     $res = FALSE; 
     if (!$this->upload->do_upload('userfile')) { 
//   $data = $this->upload->data(); 
      $res = FALSE; 
     } else { 

      $res = TRUE; 
      $this->upload->do_upload('userfile'); 
      $data = $this->upload->data(); 
     } 
     echo json_encode(array('res'=>$res,'img_pro'=>$data,'token'=>$token)); 
    } 

Qui è la mia forma

<?php echo form_open_multipart('image/upload', array("class" => "form_horizontal", "id" => "images")); ?> 
<div class="col-lg-12 col-sm-12 col-xs-12 "> 
    <div class="control-group" style="margin-top: 12px;height: 70px; width:100%;border:1px solid red;"> 
     <div class="controls form-group-sm"> 
      <span class="btn btn btn-success btn-lg btn-file"> 
      Select your images: <?PHP echo form_upload('userfile', '', 'id="userfile" class="userfile"') ?> 
      </span> 
      </div> 
     </div> 
    </div> 
<?php echo form_close(); ?> 

Ed ecco la mia Ajax

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#images input[name=userfile]").change(function() { 
       $.ajax({ 
        type: "post", 
        url: "<?php echo base_url('image/upload'); ?>", 
        data: { 
         '<?PHP echo $this->security->get_csrf_token_name(); ?>': '<?PHP echo $this->security->get_csrf_hash(); ?>', 
         userfile: $("#userfile").val() 
        }, 
        dataType: "json", 
        cache: false, 
        success: function (data) { 
         console.log(data); 
         console.log($("#userfile").val()); 
        } 
       }); 
     }); 
    }); 
</script> 

Qui è l'uscita

{ 
    "res":false, 
    "img_pro":{ 
    "file_name":"", 
    "file_type":"", 
    "file_path":".\/uploads\/", 
    "full_path":".\/uploads\/", 
    "raw_name":"", 
    "orig_name":"", 
    "client_name":"", 
    "file_ext":"", 
    "file_size":null, 
    "is_image":false, 
    "image_width":null, 
    "image_height":null, 
    "image_type":"", 
    "image_size_str":"" 
    }, 
    "token":"7a3f48fc1d4bec708e2ab338ddf96038" 
} 

Answer 1

$("#userfile").change(function (objEvent) { 
    var objFormData = new FormData(); 
    // GET FILE OBJECT 
    var objFile = $(this)[0].files[0]; 
    // APPEND CSRF TOKEN TO POST DATA 
    objFormData.append('<?= $this->security->get_csrf_token_name(); ?>', '<?= $this->security->get_csrf_hash(); ?>'); 
    // APPEND FILE TO POST DATA 
    objFormData.append('userfile', objFile); 
    $.ajax({ 
     url: "<?= base_url('image/upload'); ?>", 
     type: 'POST', 
     contentType: false, 
     data: objFormData, 
     //JQUERY CONVERT THE FILES ARRAYS INTO STRINGS.SO processData:false 
     processData: false, 
     success: function (data) { 
     } 
    }); 
});