Krajee Bootstrap文件输入，捕获AJAX成功响应
我正在使用Krajee的Bootstrap文件输入插件通过AJAX调用执行上传。
这里是Krajee插件AJAX部分的链接： Krajee插件AJAX
我正在使用的JS和PHP（codeigniter）代码如下：
JS：
$("#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()} }); 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. },
我怎样才能做到这一点？
你可以在这里看一个演示现场演示
如果您希望成功事件触发，请记住将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);
您可以阅读插件文档页面上的事件部分，以了解插件提供的各种事件。
这取决于你如何在插件中设置ajax上传。 该插件提供了两种ajax上传模式 – 同步和异步 ，如文档中所述。 如果您将uploadAsync属性设置为true uploadAsync异步。
对于AJAX SUCCESS TRAP：
- 您可以使用filebatchuploadsuccess事件进行同步上载
- 您可以使用fileuploaded事件进行异步上载
对于AJAX错误陷阱：
- 您可以使用filebatchuploaderror事件进行同步上载
- 您可以使用fileuploaderror事件进行异步上载
在您的情况下，您已将uploadAsync设置为true – 因此请使用异步设置/事件。
您可以在我的测试中使用此示例代码。我的响应数据如下：
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); });
参考这个答案 ，我这样做了
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));