jquery - 在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成为表的一部分，并在template上更改它

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

这个在文件模板上

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

但这同样不起作用，在一个成功上传FineUploader没有显示文件模板。

最佳答案

首先，在onComplete处理程序更改的内部有一个语法错误。改变

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

到

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

其次，在text option properties中，您提供的是HTML，而不是要显示在按钮内的文本字符串。所以你应该改变，

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

到

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

如果您仍然想添加一个上传图标（如我所见），或者以任何其他方式自定义HTML，那么修改template option properties：

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代码。你知道，对吧？它会让你的生活更轻松，而且它会让你的回调真正起作用，因为

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);

    }
});

there's a jQuery plugin for FineUploader
更新
这里有更多的代码精确地展示了如何a）正确地使用jQuery插件和事件，b）如何为自己的delete按钮使用this元素。
注意：这需要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>