Настройка параметра fileTemplate в FineUploader

Во-первых, я хочу сказать, что мой английский не очень хорош, поэтому я хочу извиниться. Моя проблема в том, что я безуспешно пытаюсь настроить параметр FileTemplate FineUploader. Я не хочу использовать FineUploaderBasic. Я хочу иметь полную настройку. Прежде всего, я пытался скрыть имя и размер файла после того, как загрузка прошла успешно, и я успешно это сделал, но когда я пытаюсь настроить кнопку удаления, начинается проблема. После загрузки появляется кнопка удаления, но она неактивна, я не могу ее нажать. Ниже мой код:

var restricteduploader = new qq.FineUploader({
                        element: $('#restricted-fine-uploader')[0],
                        text: {
                            uploadButton: '<div><i class="icon-upload icon-white"></i>Subir Imagen</div>',
                            deleteButton: '<input type="button" id="btnDelete" value="Eliminar imagen" />'
                        },

                        template:
                        '<div class="qq-uploader">' +
                            '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
                            '<div class="qq-upload-button">{uploadButtonText}</div>' +
                            '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
                            '<ul class="qq-upload-list"></ul>' +
                        '</div>',
                        fileTemplate:
                            '<li>' +
                                '<div class="qq-progress-bar"></div>' +
                                '<span class="qq-upload-spinner"></span>' +
                                '<span class="qq-upload-finished"></span>' +
                                '<span class="qq-edit-filename-icon"></span>' +
                                '<span class="hide-file"></span>' +
                                '<div>IMAGEN SUBIDA CON EXITO!!</div>' +
                                '<input class="qq-edit-filename" tabindex="0" type="text">' +
                                '<span class="hide-size"></span>' +
                                '<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
                                '<a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
                                '<div class="qq-upload-delete">{deleteButtonText}</div>' +
                                '<span class="qq-upload-status-text">{statusText}</span>' +
                            '</li>',
                        classes: {
                            file: 'hide-file',
                            size: 'hide-size'
                        },
                        request: {
                            endpoint: '<%= Url.Action("UploadBatchDataFile", "Account") %>'
                        },
                        deleteFile: {
                            enabled: true,
                            endpoint: '<%= Url.Action("DeleteFile", "Account") %>',
                            method: 'POST'
                        },
                        multiple: false,
                        validation: {
                            allowedExtensions: ['jpeg', 'jpg', 'png'],
                            sizeLimit: 411062 // 50 kB = 50 * 1024 bytes
                        },
                        showMessage: function (message) {
                            $('#restricted-fine-uploader').append('<div class="alert-error">' + message + '</div>');
                        },
                        //listElement: document.getElementById('files'),
                        messages: { typeError : "{file} no es un tipo de imagen valido. Imagenes valida(s): {extensions}." },
                        callbacks: {
                            onSubmitDelete: function(event, id) {
                                var filename = $(this).fineUploader('getName', id);
                                $(this).fineUploader('setDeleteFileParams', {filename: filename}, id);
                            },
                            onComplete: function (id, filename, responseJSON) {
                                if (responseJSON.success) {
                                    $('div div.alert-error').remove();

                                    $('#imgUploaded').attr("src", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);
                                    $('#hidImage').attr("value", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);

                                }
                            }
                        }
                    });

Для меня очень сложно настроить fileTemplate, до этого я пытался сделать FileTemplate частью таблицы, изменив это в шаблоне

'<ul class="qq-upload-list"></ul>' to '<table class="qq-upload-list"></table>'

и это в файлеTemplate

'<li>' to '<tr><td>' and '</li>' to </td></tr>

Но опять же, это не работает, после успешной загрузки FineUploader не показывает мне FileTemplate.


person Pato    schedule 30.07.2013    source источник
comment
Пожалуйста, не заменяйте неверный код в своем вопросе на основе рекомендаций из ответов. Из-за этого будущим читателям очень сложно определить, о чем вы спрашиваете. Я откатил ваше последнее редактирование. Если у вас есть вопросы о коде, предложенном в ответе, включите свои вопросы в качестве комментария к соответствующему ответу.   -  person Ray Nicholus    schedule 31.07.2013


Ответы (1)


Во-первых, внутри вашего изменения обработчика onComplete у вас есть синтаксическая ошибка. Изменять

$('#imgUploaded').attr("src", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);
$('#hidImage').attr("value", "<%: Url.Content("~/Images/") %>" + responseJSON.filename); 

to

$('#imgUploaded').attr("src", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);
$('#hidImage').attr("value", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);

Во-вторых, в ваших text свойствах опции вы предоставляете HTML, а не строку текста, которую хотите отобразить внутри кнопки. Итак, вы должны измениться,

text: {
    uploadButton: '<div><i class="icon-upload icon-white"></i>Subir Imagen</div>',
    deleteButton: '<input type="button" id="btnDelete" value="Eliminar imagen" />'
},

to

text: {
    uploadButton: 'Subir Imagen',
    deleteButton: 'Eliminar imagen'
},

Если вы по-прежнему хотите добавить значок загрузки (как я вижу, вы это сделали) или настроить HTML любым другим способом, измените template свойства опции:

template:
    '<div class="qq-uploader">' +
        '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
        '<div class="qq-upload-button"><i class="icon-upload icon-white"></i>{uploadButtonText}</div>' +
        '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
        '<ul class="qq-upload-list"></ul>' +
        '</div>',

Наконец, в вашем экземпляре FineUploader вы видите смесь кода jQuery и кода, отличного от jQuery. Вы знаете, что существует подключаемый модуль jQuery для FineUploader, верно? Это сделало бы вашу жизнь намного проще, и ваши обратные вызовы действительно работали бы, потому что значение this в

onSubmitDelete: function(event, id) {
    var filename = $(this).fineUploader('getName', id);
    $(this).fineUploader('setDeleteFileParams', {filename: filename}, id);
},

просто не будет элементом, на котором создается FineUploader. Если бы вы использовали плагин jQuery, это сработало бы.

С плагином jQuery вы можете просто сделать...

$("#restricted-fine-uploader").fineUploader({
    // .. define your options here, same as above ...
}).on('submitDelete', function (event, id) {
    var filename = $(this).fineUploader('getName', id);
    $(this).fineUploader('setDeleteFileParams', {filename: filename}, id);

}).on('complete', function (event, id, filename, responseJSON) {
    if (responseJSON.success) {
        $('div div.alert-error').remove();

        $('#imgUploaded').attr("src", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);
        $('#hidImage').attr("value", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);

    }
});

Вот ссылка на документацию по использованию подключаемого модуля jQuery.

Обновлять

Вот еще немного кода, показывающего, как а) правильно использовать плагин jQuery и события и б) как использовать элемент input для кнопки удаления.

примечание: для этого требуется FineUploader >=3.7.1

JavaScript

$(function () {
    $("#restricted-fine-uploader").fineUploader({
        text: {
            uploadButton: "<i class='icon-upload icon-white'></i>Subir Imagen"
        },
        fileTemplate:
            '<li>' +
            '<div class="qq-progress-bar"></div>' +
            '<span class="qq-upload-spinner"></span>' +
            '<span class="qq-upload-finished"></span>' +
            '<span class="hide-file"></span>' +
            '<div>IMAGEN SUBIDA CON EXITO!!</div>' +
            '<span class="hide-size"></span>' +
            '<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
            '<a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
            '<input class="qq-upload-delete" type="button" value="{deleteButtonText}" />' +
            '<span class="qq-upload-status-text">{statusText}</span>' +
            '</li>',

        classes: {
            file: 'hide-file',
            size: 'hide-size'
        },
        request: {
            endpoint: '<%= Url.Action("UploadBatchDataFile", "Account") %>'
        },
        deleteFile: {
            enabled: true,
            endpoint: '<%= Url.Action("DeleteFile", "Account") %>',
            method: 'POST'
        },
        multiple: false,
        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'png'],
            sizeLimit: 411062 // 50 kB = 50 * 1024 bytes
        },
        showMessage: function (message) {
            $('#restricted-fine-uploader').append('<div class="alert-error">' + message + '</div>');
        },
        //listElement: document.getElementById('files'),
        messages: {
            typeError: "{file} no es un tipo de imagen valido. Imagenes valida(s): {extensions}."
        }
    }).on('submitDelete', function (event, id) {
        var filename = $(this).fineUploader('getName', id);
        $(this).fineUploader('setDeleteFileParams', {
            filename: filename
        }, id);
    }).on('complete', function (id, filename, responseJSON) {
        if (responseJSON.success) {
            $('div div.alert-error').remove();

            $('#imgUploaded').attr('src', '<%: Url.Content("~/Images/") %>' + responseJSON.filename);
            $('#hidImage').attr('value', '<%: Url.Content("~/Images/") %>' + responseJSON.filename);

        }
    });
});

HTML

<ul id="restricted-fine-uploader"></ul>
person Mark Feltner    schedule 30.07.2013
comment
Я изменяю код, который вы предлагаете, но ваш ответ не решает мою проблему. Я редактирую пост, потому что код не соответствует вопросу. - person Pato; 30.07.2013
comment
Код, который я вам предоставил, работает и тщательно протестирован. Ваш обновленный код неверен. Во-первых, вы используете qq.FineUploader, но добавляете прослушиватели событий с помощью метода подключаемого модуля jQuery. Во-вторых, вам не нужно указывать какие-либо параметры template, потому что они точно такие же, как и по умолчанию. В-третьих, ваши сигнатуры функций для ваших обработчиков событий совершенно неверны. Я очень сомневаюсь, что ваш код даже правильно оценивается в любом браузере. - person Mark Feltner; 30.07.2013
comment
Рэй Николус, вы правы, я новый пользователь и не знаю, как добавить исправление в свой пост на основе ответа mfeltner без изменения исходного кода. mfeltner Я делаю все, как вы предлагаете. Код работает для загрузки, я тестировал на своем веб-сайте, конечно, мне нужно изменить часть, где обрабатывается удаление, submitDelete и т. д., но если я изменю ссылку, которая обрабатывает кнопку удаления и ввода, ввод отключен. Опять не могу изменить шаблон файла - person Pato; 31.07.2013
comment
@Pato, не могли бы вы уточнить, что именно вы подразумеваете под: изменить ссылку, которая обрабатывает кнопку удаления и ввода, ввод отключен. Я снова не могу изменить шаблон файла? - person Mark Feltner; 31.07.2013
comment
Хорошо, в опции fileTemplate я изменяю этот ‹a class=qq-upload-delete href=#›{deleteButtonText}‹/a› на '‹input class=qq-upload-delete type=button value={deleteButtonText} / ›'. После успешной загрузки появляется файл fileTemplate, но ввод отключен. Я не могу щелкнуть по ней. Если я оставлю ссылку, когда я нажму на нее, действие будет вызвано. Я программирую MVC. Что я пытаюсь сделать, так это понять, как работает FineUploader, я хочу иметь возможность изменять все его параметры, я готов купить его, но мне нужно знать все функции и как изменить его использование. - person Pato; 31.07.2013
comment
mfeltner, дизайн моего проекта такой же, как у вас, с небольшими отличиями от того, который вы разместили в обновлении. В любом случае, я скопировал ваш код и вставил в свой проект. И снова, когда загрузка прошла успешно и приходит файл fileTemplate, он не отображается и не включает кнопку ввода. Я не могу нажать на нее. Скажите, если вам нужно больше о решении, о действии контроллера, я не знаю, что делать или что вам показать. - person Pato; 01.08.2013
comment
Эта проблема характерна для определенного браузера? - person Mark Feltner; 01.08.2013
comment
Я тестировал в Internet Explorer 8 и работает ужасно, прежде чем действие вернет JSon с его параметрами, появится модальное всплывающее окно с вопросом, где я хочу сохранить файл. Файлы содержат в виде простого текста ответ JSON. Я полагаю, мне нужно добавить что-то в параметре запроса. Прежде чем я работал над версией Chrome 28.0.1500.72m, я установил fiddler, чтобы узнать, почему результат JSon оказывается пустым, это происходит после обновлений кода. Глядя в скрипач, ответ Json правильный, я не понимаю, почему полный обратный вызов не может иметь правильный ответ Json. Может быть, это имеет какое-то отношение. - person Pato; 01.08.2013
comment
Я изменил функцию полной функции события (id, имя файла, responseJSON) на функцию (event, id, fileName, responseJSON), и теперь я получаю правильный ответJson, в определении отсутствовало одно событие параметра. Но кнопка по-прежнему отключена. В Internet Explorer 8 у меня та же проблема, что и раньше, даже если изменение CustomHeader принимается. - person Pato; 01.08.2013
comment
mfeltner, я вижу jsfiddle, но мне это не помогает, потому что я не могу загрузить изображение, поэтому я не вижу шаблон файла. Просто прокомментировать. - person Pato; 01.08.2013
comment
@Pato, мне жаль, что это не работает для тебя. У меня код работает во всех поддерживаемых браузерах. :( Еще две идеи: Какую версию FineUploader вы используете? Планируете ли вы использовать функцию редактирования имени файла? Я бы посоветовал обновиться до последней версии и, если вы не используете эту функцию, удалить все элементы с класс, начинающийся с qq-edit-* из вашего fileTemplate. - person Mark Feltner; 01.08.2013
comment
mfeltner, Спасибо! для вашей поддержки, я удалил весь элемент из файлаTemplate с классом qq-edit-*, кнопка теперь включена, я могу нажать на нее, и вызывается действие для удаления. Когда я приду домой после работы, я проверю IE 8, и я дам вам знать, что эта проблема с файлом с возвратом JSon все еще остается. Я использую версию 3.7.0. В будущем будет версия с поддержкой моей версии Chrome и IE8, чтобы не делать этот трюк с удалением этих элементов? и включить функцию редактирования файла?. Как я могу разместить обновленный код для пользователей, как это может понадобиться?. Еще раз спасибо! - person Pato; 01.08.2013
comment
@Pato, нет проблем, это большая работа;) - я бы предложил внести ваши изменения. Если у вас есть отдельный вопрос, связанный с FineUploader, опубликуйте новый здесь, в StackOverflow, и один из сопровождающих свяжется с вами. Я также хотел добавить, что если вы хотите, чтобы редактирование имени файла работало, вам понадобится версия 3.7.1 FineUploader. В этой версии было выпущено исправление, которое исправляет ошибку, связанную с функцией редактирования имени файла и кнопкой удаления/отмены. Если бы мои предложения сработали для вас, то принятый ответ и / или голосование были бы фантастическими! :D - person Mark Feltner; 02.08.2013
comment
mfeltner, хорошо, я скачал последнюю версию и теперь могу включить редактирование файлов в своей версии Chrome. Я открою новый пост, если не смогу решить проблему загрузки IE8. большое спасибо! - person Pato; 02.08.2013