Как настроить FancyUpload для загрузки нескольких файлов, каждый со своими данными (например, заголовок, заголовок)?

Question

Я отвечу на этот вопрос

Я хочу разрешить моим пользователям загружать несколько файлов за один раз и использовать FancyUpload для этого.Я могу заставить работать базовую версию FancyUpload, но теперь мне нужно разрешить пользователям указывать некоторые метаданные для каждого файла, такие как заголовок или заголовок.

К сожалению, я столкнулся с парой проблем.Во-первых, мне нужно визуально связать входные данные для файла с этим файлом.После выбора файлов для загрузки FancyUpload отображает список этих файлов.Поэтому мне понадобится различное количество входных данных в зависимости от того, сколько файлов было выбрано, и мне также нужно будет связать каждый из этих входных данных с конкретным файлом.

Во-вторых, мне нужно POST метаданные вместе сфайл.Однако FancyUpload позволяет указывать только метаданные для каждого файла.То есть я могу иметь вход и добавить его в качестве параметра POST, но тогда каждый файл получит этот параметр.Мне нужно иметь возможность указать, скажем, заголовок для каждого отправляемого файла.

Answer 1

Обратите внимание, что этот ответ предполагает практическое знание JavaScript и Mootools.Я займусь каждой проблемой по очереди:

Рендеринг входных данных

Оказывается, что рендеринг каждого файла обрабатывается методом класса FancyUpload2.File.Чтобы изменить его, нам нужно реализовать его следующим образом:

FancyUpload2.File.implement({
    render: function() {
    //copy the entire render function in here
    }
});

Убедитесь, что вы скопировали всю функцию рендеринга.На данный момент это просто переопределит метод рендеринга по умолчанию ... методом рендеринга по умолчанию.Однако мы хотим изменить только процесс рендеринга, а не переписывать его, так что это хорошо.Примерно на полпути через метод находится строка this.element = new Element('li', {'class': 'file'}).adopt(, а затем список элементов внутри метода accept, который будет отображать FancyUpload.В самом конце метода принятия введите следующее:

new Element('input', {'class': 'caption', 'name': 'caption[]', 'type': 'text'})

Как вы можете видеть, это добавит новый ввод в список, предназначенный для получения подписи от пользователя.Вы также можете добавить метку и любые другие элементы формы.

Теперь, если вы выберете несколько файлов, вы заметите, что все они отображаются с дополнительными элементами, которые вы указали.

Отправка входных данных

Когда вы создаете объект FancyUpload, вам нужно указать новое событие в его объекте параметров:

onBeforeStart: function() {
    var listSize = this.fileList.length;
    for (var i=0; i < listSize; i++){
        var caption = this.fileList[i].element.getElement('input.caption').get('value');
        var opts = $merge(this.options.data, {
            'caption': caption
        });
        this.fileList[i].setOptions({'data' : opts});
    }
}

onBeforeStart запускается непосредственно перед тем, как мы отправим запрос AJAX.Это означает, что все, что мы здесь делаем, будет сделано после того, как пользователь закончит ввод данных и до того, как эти данные будут отправлены.Brilliant!Нам нужно добавить новые данные в каждый файл, поэтому первое, что нужно сделать, - это перебрать список файлов.Затем мы находим значение ввода заголовка, связанного с текущим файлом в списке, и присваиваем его var caption.

. Затем мы получаем доступ к данным файлов с помощью this.options.data и используем $merge для создания новогообъект со всеми этими данными и нашими новыми данными, а также.Мы присваиваем этот объект var opts.Наконец, мы перезаписываем исходные параметры файлов, используя setOptions.Теперь, когда файл отправляется, данные отправляются вместе с ним и будут доступны из $ _POST, если вы используете PHP.

Кредиты: ключ к решению второй проблемы я нашел в этот пост .