jQuery HTML5 фильтр флажка загрузчика - PullRequest
0 голосов
/ 05 июля 2019

Я пытаюсь интегрировать это загрузчик на свой веб-сайт, и я совершенно новичок в 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), тогда как в нем должно быть выставлено значение всех отмеченных флажков. Я не уверен, какие изменения необходимы для его работы. Поэтому, если кто-то может помочь, это было бы здорово:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...