it-swarm.com.ru

Krajee Bootstrap Файл ввода, ловить AJAX ответ успеха

Я использую Krajee плагин Bootstrap File Input для выполнения загрузки с помощью вызова AJAX.

Вот ссылка на раздел плагина Krajee AJAX: Плагин Krajee AJAX

Я использую следующие коды JS и PHP (codeigniter):

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

Прямо сейчас я получаю ответ от PHP, независимо от того, является ли это ошибкой или успехом, как JSON, я просмотрел документацию по плагину и до сих пор не могу найти способ отловить ответ AJAX и действовать в соответствии с на этот ответ, как мы делаем в jQuery с функцией успеха ajax: 

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

Как я могу это сделать?

10
oussama kamal

Вы можете проверить демо здесь живое демо

Не забудьте установить uploadAsync false, если вы хотите, чтобы событие успеха сработало

Пример кода:

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

Вы можете прочитать раздел events на странице документации плагина , чтобы понять различные события, предоставляемые плагином.

Это зависит от того, как вы настроили загрузку ajax в плагине. Плагин предлагает два режима загрузки ajax - синхронный и асинхронный как описано в документации. Это асинхронно, если у вас установлено свойство uploadAsync равное true.

ДЛЯ AJAX УСПЕХА ЛОВУШКИ:

  • вы можете использовать событие filebatchuploadsuccess для синхронных загрузок
  • вы можете использовать fileuploaded событие для асинхронной загрузки

FOR AJAX ERROR TRAP:

  • вы можете использовать событие filebatchuploaderror для синхронных загрузок
  • вы можете использовать fileuploaderror событие для асинхронной загрузки

В вашем случае вы установили для uploadAsync значение true - так что используйте асинхронные настройки/события. 

6
Kartik V

вы можете использовать этот пример кода в своем тесте. В моем тесте мои данные ответа будут такими:

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

сослаться на этот ответ , я сделал так

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

В ASHX File добавьте ответ в контекст:

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