Krajee Bootstrap文件输入,捕获AJAX成功响应

Question

我正在使用Krajee的Bootstrap文件输入插件通过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.
         },

我怎样才能做到这一点？

Answer 1

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

如果您希望成功事件触发,请记住将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); 

Answer 2

您可以阅读插件文档页面上的事件部分,以了解插件提供的各种事件.

这取决于您如何在插件中设置ajax上传.该插件提供了两种ajax上传模式 - 同步和异步,如文档中所述.如果您将uploadAsync属性设置为,则为异步true.

对于AJAX SUCCESS TRAP:

• 您可以使用filebatchuploadsuccess事件进行同步上载
• 您可以使用fileuploaded事件进行异步上载

对于AJAX错误陷阱:

• 您可以使用filebatchuploaderror事件进行同步上载
• 您可以使用fileuploaderror事件进行异步上载

在您的情况下,您已将set uploadAsync设置为true - 因此请使用异步设置/事件.