web-dev-qa-db-fra.com

Krajee Bootstrap File Input, capture AJAX réponse de réussite

J'utilise Krajee, le plug-in Bootstrap File Input, pour effectuer un téléchargement via un appel AJAX.

Voici le lien vers la section du plugin Krajee AJAX: Le plugin Krajee AJAX

Les codes JS et PHP (codeigniter) que j'utilise sont les suivants:

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"); 
    }            
}

À l’heure actuelle, j’obtiens une réponse de PHP qui que ce soit d’une erreur ou d’un succès en tant que JSON, j’ai parcouru la documentation du plugin et je ne trouve toujours pas comment attraper la réponse AJAX et agir conformément à cette réponse comme dans jQuery avec la fonction de succès ajax: 

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

Comment puis-je faire ceci?

javascriptphpjqueryajaxtwitter-bootstrap
10
oussama kamal

Vous pouvez consulter une démo ici démo en direct

N'oubliez pas de définir uploadAsync false si vous souhaitez que l'événement de réussite soit déclenché.

Exemple de code:

JS

$("#input-id").fileinput({
    showRemove:false,
    showPreview: false,
    uploadUrl: "../xxxx/xxxx/XXXXXX.php", // server upload action
    uploadAsync: false,
    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);
13
Xavi Guirao

Vous pouvez lire la section events sur la page de documentation du plugin pour comprendre les différents événements fournis par le plugin.

Cela dépend de la manière dont vous avez configuré le téléchargement ajax dans le plugin. Le plugin offre deux modes de téléchargement ajax - synchrone et asynchrone comme décrit dans la documentation. Son asynchrone si la propriété uploadAsync est définie sur true.

POUR AJAX PIÈGE À SUCCÈS:

  • vous pouvez utiliser l'événement filebatchuploadsuccess pour les téléchargements synchronisés
  • vous pouvez utiliser l'événement fileuploaded pour les téléchargements asynchrones

POUR AJAX ERREUR PIÈGE:

  • vous pouvez utiliser l'événement filebatchuploaderror pour les téléchargements synchronisés
  • vous pouvez utiliser l'événement fileuploaderror pour les téléchargements asynchrones

Dans votre cas, vous avez défini uploadAsync sur true - utilisez donc les paramètres/événements asynchrones. 

6
Kartik V

vous pouvez utiliser cet exemple de code dans votre test. Dans mon test, mes données de réponse ressemblent à ceci:

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);
});
1
user3033075

référez-vous cette réponse , j'ai fait comme ça

javascript:

$('#input-id').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
    console.log('File uploaded successfully : ID '+ data.response.d);
});

Dans ASHX Fichier, ajoutez une réponse au contexte:

context.Response.ContentType = "application/json";
string myId = "NewwId 1";
var wrapper = new { d = myId };
context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(wrapper));
0
Ashi