Krajee Bootstrap File Input, in attesa della risposta positiva AJAX

Question

Sto utilizzando Krajee il plug-in di input del file Bootstrap per eseguire un caricamento tramite chiamata AJAX.

Ecco il link alla sezione Krajee plug-AJAX: Krajee plugin AJAX

I codici JS e PHP (CodeIgniter) che sto usando sono i seguenti:

JS:

<script>   
     $("#file-upload").fileinput({ 
      'allowedFileExtensions' : ['csv'], 
      'maxFileSize': 5120, 
      'maxFileCount': 1, 
      'uploadUrl': 'dashboard/uploader', 
      'elErrorContainer': '#errorBlock', 
      'uploadAsync': true, 
      'msgInvalidFileExtension': 'Invalid extension for file "{name}". Only "{extensions}" files are supported.', 
      'uploadExtraData': {csrf_token_name: $("input[name=csrf_token_name]").val()} 
     });  
    </script> 

PHP :

public function uploader(){ 
     $config['upload_path'] = './csv_uploads/'; 
     $config['allowed_types'] = 'csv'; 
     $config['max_size'] = '5120'; 

     $this->upload->initialize($config); 
     if (!$this->upload->do_upload("file-upload")){ 
      $data['error'] = 'The following error occured : '.$this->upload->display_errors().'Click on "Remove" and try again!'; 
      echo json_encode($data); 
     }else{ 
      echo json_encode("success"); 
     }    
    } 

In questo momento ottengo una risposta da PHP qualunque sia è un errore o un successo come JSON, ho esaminato la documentazione del plug-in e non riesco ancora a trovare come rilevare la risposta AJAX e agire in base a tale risposta, come facciamo in jQuery con la funzione di successo Ajax:

success : function (response) { 
      //Deal with the server side "response" data. 
     }, 

Chiunque conosca il plug-in può mostrarmi come si prega?

Grazie

Answer 1

qui si ha il modo per farlo ... Bad documentazione nella sua pagina:/

$("#input-id").fileinput({ 
    showRemove:false, 
    showPreview: false, 
    uploadUrl: "../xxxx/xxxx/XXXXXX.php", // server upload action 
    uploadAsync: true, 
    uploadExtraData: function() { 
     return { 
      bdInteli: xxxx 
     }; 
    } 
}); 

// CATCH RESPONSE 
$('#input-id').on('filebatchuploaderror', function(event, data, previewId, index) { 
var form = data.form, files = data.files, extra = data.extra, 
    response = data.response, reader = data.reader; 
}); 

$('#input-id').on('filebatchuploadsuccess', function(event, data, previewId, index) { 
    var form = data.form, files = data.files, extra = data.extra, 
    response = data.response, reader = data.reader; 
    alert (extra.bdInteli + " " + response.uploaded); 
}); 

PHP

$nombre = $_FILES["ficheroExcel"]["name"]; 
$bdInteli = $_POST['bdInteli']; 
if (move_uploaded_file($_FILES["ficheroExcel"]["tmp_name"], $nombre)){ 
    $output = array('uploaded' => 'OK'); 
} else { 
    $output = array('uploaded' => 'ERROR'); 
} 
echo json_encode($output); 

Answer 2

Potete leggere la events section on the plugin documentation page per capire la vari eventi forniti dal plugin.

Dipende da come è stato impostato il caricamento ajax nel plug-in. Il plug-in offre due ajax upload modes - synchronous and asynchronous come descritto nella documentazione. È asincrono se la proprietà uploadAsync è impostata su true.

per l'Ajax SUCCESSO TRAP:

• è possibile utilizzare l'evento filebatchuploadsuccess per sincroni arrivi
• è possibile utilizzare fileuploaded evento per il caricamento asincrono

per l'Ajax ERRORE TRAP:

• è possibile utilizzare il filebatchuploaderror evento per sincroni arrivi
• è possibile utilizzare fileuploaderror evento per il caricamento asincrono

Nel tuo caso è stata impostata uploadAsync set true - in modo da utilizzare le impostazioni/asincroni eventi.

Answer 3

è possibile utilizzare questo codice di esempio nel vostro test.in mia prova, i miei dati di risposta in questo modo:

response data: 
{ 
"ver":"1.0", 
"ret":true, 
"errmsg":null, 
"errcode":0, 
"data":{ 
    "status":"upload success", 
    "originalFilename":"testFileName.txt", 
    "fileName":"excelFile", 
    "fileType":"text/plain", 
    "fileSize":1733 
} 

javascript code: 
$('#input-id').on('fileuploaded', function(event, data, previewId, index) { 
    var response = data.response; 
    if(response.ret) { 
     alert("upload success!"+data.response.data); 
    }else{ 
     alert("upload failed!"+response.errmsg) 
    } 
    alert('File uploaded triggered'+form+"response:"+response); 
    console.info(response.data); 
});