Я пытаюсь интегрировать это загрузчик на свой веб-сайт, и я совершенно новичок в jQuery и почти три часа пытался заставить его работать так, как я хотел
Ссылка на загрузчик: https://innostudio.de/fileuploader/examples/drag-drop-form/
Этот код jQuery используется мной в настоящее время
<script type="text/javascript">
$(document).ready(function() {
// define the form and the file input
var $form = $('#myform'),
$fileuploaderInput = $('input[name="file0"]');
// enable fileuploader plugin
$fileuploaderInput.fileuploader({
limit: 10,
fileMaxSize: 1024,
inputNameBrackets: false,
addMore: true,
changeInput: '<div class="fileuploader-input">' +
'<div class="fileuploader-input-inner">' +
'<div>${captions.feedback} ${captions.or} <span>${captions.button}</span></div>' +
'</div>' +
'</div>',
theme: 'dropin',
upload: true,
enableApi: true,
onSelect: function(item) {
item.upload = null;
},
thumbnails: {
onImageLoaded: function(item) {
if (!item.html.find('.fileuploader-action-edit').length)
item.html.find('.fileuploader-action-remove').before('<a class="fileuploader-action fileuploader-action-popup fileuploader-action-edit" title="Edit"><i></i></a>');
}
},
editor: {
cropper: {
ratio: '1:1',
minWidth: 100,
minHeight: 100,
showGrid: true
}
},
captions: {
feedback: 'Drag and drop files here',
or: 'or',
button: 'Browse Files'
}
});
// form submit
$form.on('submit', function(e) {
e.preventDefault(1);
var formData = new FormData(),
api = $.fileuploader.getInstance($fileuploaderInput),
_formInputs = [];
// using this long version because of missing method formData.delete() many browsers
$.each($form.find("[name]:input"), function(index, input) {
var $input = $(input),
name = $input.attr('name'),
type = $input.attr('type') || "",
checked = $input.attr('checked'),
value = $input.val();
if ($.inArray(name, _formInputs) > 0)
return;
_formInputs.push(name);
if (typeof value == "undefined")
return true;
if (type == 'file') {
// add fileuploader files to the formdata
if (name == $fileuploaderInput.attr('name')) {
var files = api.getChoosedFiles();
for(var i = 0; i<files.length; i++) {
formData.append(name, files[i].file, (files[i].name ? files[i].name : false));
}
api.disable(true);
}
} else {
formData.append(name, value);
}
});
$.ajax({
url: $form.attr('action') || "#",
data: formData,
type: $form.attr('method') || 'POST',
enctype: $form.attr('enctype') || 'multipart/form-data',
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$form.find('.form-status').html('<div class="progressbar-holder"><div class="progressbar"></div></div>');
$form.find('input[type="submit"]').attr('disabled', 'disabled');
},
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener("progress", this.progress, false);
}
return xhr;
},
success: function(result, textStatus, jqXHR) {
// update input values
try {
var data = JSON.parse(result);
for(var key in data) {
var field = data[key];
// if fileuploader input
if (field.files) {
if (field.hasWarnings) {
for (var warning in field.warnings) {
alert(field.warnings[warning]);
}
return this.error ? this.error(jqXHR, textStatus, field.warnings) : null;
}
if (key == $fileuploaderInput.attr('name').replace('[]', '')) {
// update the fileuploader's file names
for (var i = 0; i<field.files.length; i++) {
$.each(api.getChoosedFiles(), function(index, item) {
if (field.files[i].old_name == item.name) {
item.name = field.files[i].name;
item.html.find('.column-title > div:first-child').text(field.files[i].name).attr('title', field.files[0].name);
}
item.data.uploaded = true;
});
}
api.updateFileList();
}
} else {
$form.find('[name="'+ key +'"]:input').val(field);
}
}
} catch (e) {}
api.enable();
$form.find('.form-status').html('<p class="text-success">Success!</p>');
$form.find('input[type="submit"]').removeAttr('disabled');
},
error: function(jqXHR, textStatus, errorThrown) {
api.enable();
$form.find('.form-status').html('<p class="text-error">Error!</p>');
$form.find('input[type="submit"]').removeAttr('disabled');
},
progress: function(e) {
if (e.lengthComputable) {
var t = Math.round(e.loaded * 100 / e.total).toString();
$form.find('.form-status .progressbar').css('width', t + '%');
}
}
});
});
});
</script>
моя форма выглядит как
<form action="php/form_upload.php" id="myform" method="post" enctype="multipart/form-data">
<!-- file input -->
<input type="file" name="file0">
<input type="checkbox" name="custom" value="1077" >
<input type="checkbox" name="custom" value="1078" >
<input type="checkbox" name="custom" value="1079" >
<div class="form-status"></div>
<input type="submit">
</form>
Проблема в том, что при выборе всех флажков она просто публикует одно значение входного флажкакак на скриншоте в пост-запросе (https://prnt.sc/oavsmh), тогда как в нем должно быть выставлено значение всех отмеченных флажков. Я не уверен, какие изменения необходимы для его работы. Поэтому, если кто-то может помочь, это было бы здорово:)