Krajee Bootstrap Datei Eingang, fangen AJAX Erfolgsantwort

Question

Ich benutze Krajee das Bootstrap File Input Plugin, um einen Upload über AJAX-Aufruf durchzuführen.

Hier ist der Link zum Krajee Plugin AJAX Abschnitt: Krajee plugin AJAX

Die JS und PHP (codeigniter) Codes Ich verwende sind wie folgt:

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

Im Moment bekomme ich eine Antwort von PHP was auch immer Es ist ein Fehler oder ein Erfolg als JSON, ich habe die Plugin-Dokumentation durchgesehen und kann immer noch nicht finden, wie man die AJAX-Antwort abfängt und entsprechend dieser Antwort verhält, wie in jQuery mit der Ajax-Erfolgsfunktion:

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

Kann jemand, der dieses Plugin kennt, mir bitte zeigen?

Dank

Answer 1

Hier haben Sie die Möglichkeit, es zu tun ... Bad Dokumentation in seiner Seite:/

$("#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

Sie die events section on the plugin documentation page das verstehen lesen verschiedene vom Plugin bereitgestellte Ereignisse.

Es hängt davon ab, wie Sie den Ajax-Upload im Plugin eingerichtet haben. Das Plugin bietet zwei ajax upload modes - synchronous and asynchronous wie in der Dokumentation beschrieben. Es ist asynchron, wenn Sie die uploadAsync-Eigenschaft auf true festgelegt haben.

FÜR AJAX ERFOLG TRAP:

• Sie die filebatchuploadsuccess Ereignis für synchrone Uploads können
• verwenden, können Sie fileuploaded Ereignis für asynchrone Uploads

FÜR AJAX ERROR TRAP verwenden:

• können Sie die 012 verwendenEreignis für synchrone Uploads
• Sie fileuploaderror Ereignis für asynchrone Uploads

In Ihrem Fall Sie eingestellt haben uploadAsync Satz auf true verwenden können - so verwenden, um die asynchronen Einstellungen/Ereignisse.

Answer 3

können Sie diesen Beispielcode verwenden in Ihrem test.in meinem Test, meine Antwortdaten wie folgt aus:

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