jquery - FineUploader 自定义 fileTemplate 选项

Question

首先，我想说我的英语不好，所以我想道歉。我的问题是我试图自定义 FineUploader FileTemplate 选项但没有成功。 我不想使用 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>'

这个在文件模板上

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

但这同样不起作用，在成功上传后，FineUploader 没有向我显示 FileTemplate。

Answer 1

首先，在您的 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 代码。你知道there's a jQuery plugin for FineUploader ， 正确的？它会让你的生活更轻松，它会让你的回调真正起作用，因为 this 在

中的值(value)

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

    }
});

Here is a link to documentation on how to use the jQuery plugin

更新

这里有更多代码展示了如何 a) 正确使用 jQuery 插件和事件以及 b) 如何为删除按钮使用 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>