JQuery, bootstrapValidator и ajaxForm (malsup) — данные не опубликованы

Что я пытаюсь реализовать функцию, где пользователь нажимает значок, чтобы выбрать файл. Если файл действителен, он автоматически начинает загрузку и показывает индикатор выполнения. После этого он отправляет данные через AJAX и отправляет ответ в div.

Пока что мне удалось проверить тип файла и начать загрузку с индикатором выполнения. Но когда загрузка завершается, вызывается URL / действие, но данные не отправляются. Я пытался сделать дамп POST, FILES, GET и REQUEST, но они все пусты. Вот мой код:

$('#attachmentForm').bootstrapValidator({
container: 'tooltip',
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-check',
invalid: 'glyphicon glyphicon-cross',
validating: 'glyphicon glyphicon-cycle'
},
fields: {
attachment: {
validators: {
notEmpty: {
message: 'Please select a valid file.'
},
file: {
extension: 'jpg,jpeg,png,zip',
type: 'image/jpeg,image/png,application/zip',
maxSize: 1024 * 1024 * 20000,
message: 'The selected file is not valid.'
}
}
}
}
})
.on('success.field.bv', function(e, data) {    // detect presence of a valid file
e.preventDefault();

var progressBar = $('.progress-bar');
var progressText = $('.selectfile').val();

// Had to manually trigger a hidden button to submit form. If you have a better way to do this, I'm all ears.
$('.attachmentForm-btn').trigger('click');

$('.upload-progress').slideDown(500);
$('.cancelupload').slideDown(500);

$('#attachmentForm').ajaxForm({
beforeSend: function(xhr) {
$('.cancelupload').click(xhr.abort)    // Need to include a cancel button. Will this work?
var percentVal = '0%';
progressBar.html('Uploading: '+ progressText.split('\\').pop());
progressBar.width(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
progressBar.width(percentVal);
},
complete: function(xhr) {
progressBar.width("100%");
console.log(xhr.responseText);
},
type: 'post',
url: posturl
});
})

Вот форма

<form id="attachmentForm" name="attachmentForm" method="post" enctype="multipart/form-data" novalidate="novalidate">
<div class="form-group selectfile-wrap">
<input type="hidden" name="task" value="uploadAttachment" />
<input type="file" class="form-control selectfile" name="attachment" />
<button class="attachmentForm-btn" type="submit" style="display:none;"></button>
</div>
</form>

Спасибо за ваше время

0

Решение

решено так:

$('#attachmentForm').bootstrapValidator({
container: 'tooltip',
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-check',
invalid: 'glyphicon glyphicon-cross',
validating: 'glyphicon glyphicon-cycle'
},
fields: {
attachment: {
validators: {
notEmpty: {
message: 'Please select a valid file.'
},
file: {
extension: 'jpg,jpeg,png,zip',
type: 'image/jpeg,image/png,application/zip',
maxSize: 1024 * 1024 * 20000,
message: 'The selected file is not valid.'
}
}
}
}
})
.on('success.field.bv', function(e, data) {
$('#attachmentForm .uploadfilebtn').trigger('click');
})$('#attachmentForm').ajaxForm({
url: siteroot +'ajaxreq',
type: 'post',
data: {/* data here */},
datatype: 'json',
beforeSend: function(xhr) {
$('.upload-progress').slideDown(500);
$('.cancelupload').slideDown(500);

var ProgressText = $('.selectfile').val();

$('.cancelupload').click(xhr.abort)
var percentVal = '0%';
$('.progress-bar').html('Uploading: '+ ProgressText.split('\\').pop());
$('.progress-bar').width(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
$('.progress-bar').width(percentVal);
},
complete: function(xhr) {
$('.progress-bar').width("100%");
console.log(xhr.responseText);
},
});
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]