Krajee Bootstrap文件输入，捕获AJAX成功响应 [英] Krajee Bootstrap File Input, catching AJAX success response

问题描述

我正在使用Krajee的Bootstrap文件输入插件通过AJAX调用执行上传。

I'm using Krajee the Bootstrap File Input plugin to perform an upload via AJAX call.

以下是Krajee插件AJAX部分的链接： Krajee插件AJAX

Here is the link to the Krajee plugin AJAX section: Krajee plugin AJAX

我正在使用的JS和PHP（codeigniter）代码如下：

The JS and PHP (codeigniter) codes I'm using are as following:

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成功函数一样：

Right now I get a response from PHP whatever it is an error or a success as JSON, I have went through the plugin documentation and I still can't find how to catch the AJAX response and act according to that response as we do in jQuery with the ajax success function :

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

我该怎么做？

推荐答案

你可以在这里看一个演示现场演示

You can check out a demo here live demo

如果您想要成功举办火灾，请记得设置 uploadAsync false

Remember to set uploadAsync false if you want the success event fire

示例代码：

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

这篇关于Krajee Bootstrap文件输入，捕获AJAX成功响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！