javascript 如何自定义Blueimp jQuery文件上传的上传/下载模板

How to customize Upload/Download Template of Blueimp jQuery File Upload

提问by bachcao

I'm trying to use the jQuery File UploadDemo. I've searched through wiki& template engine wiki but couldn't find an answer how to customize the Upload/Download template without using table row tag. Each time I remove/change table row tag it does not work.

我正在尝试使用jQuery 文件上传演示。我搜索了wiki和模板引擎 wiki，但找不到如何在不使用表格行标记的情况下自定义上传/下载模板的答案。每次我删除/更改表格行标记时，它都不起作用。

Bellow is my customized upload template and it does not work. I don know why, could somebody please help?

Bellow 是我自定义的上传模板，它不起作用。我不知道为什么，有人可以帮忙吗？

uploadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<li class="span3"><div class="thumbnail template-upload">' +
                '<div class="preview"><span></span></div>' +
                '<div class="caption"><h5 class="name"></h5>' +
                '<p class="size"></p>' +
                (file.error ? '<div class="error" colspan="2"></div>' :
                        '<div><div class="progress">' +
                            '<div class="bar" style="width:0%;"></div></div></div>' +
                            '<div class="start"><button>Start</button></div>'
                ) + '<div class="cancel"><button>Cancel</button></div></div></div></li>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.error').text(
                    locale.fileupload.errors[file.error] || file.error
                );
            }
            rows = rows.add(row);
        });
        return rows;
    },

采纳答案by doowb

From looking at the examples and the live demo I created this jsbin: http://jsbin.com/ivonow/1/

通过查看示例和现场演示，我创建了这个 jsbin：http://jsbin.com/ivonow/1/

It's the code from the demo. I took out the jQuery templates at the bottom of the html and added the uploadTemplate function from above to the options passed in when setting up the fileupload object.

这是演示中的代码。我把html底部的jQuery模板拿出来，在设置fileupload对象时传入的options中添加了上面的uploadTemplate函数。

I also had to set uploadTemplateId and downloadTemplateId to null so it wouldn't try to load the the defaults:

我还必须将 uploadTemplateId 和 downloadTemplateId 设置为 null，这样它就不会尝试加载默认值：

{
  uploadTemplateId: null,
  downloadTemplateId: null,
}

In the html, I took out the table that surrounds the row templates and add a UL but the styling is still weird.

在html中，我取出了围绕行模板的表格并添加了一个UL，但样式仍然很奇怪。

Hope this helps.

希望这可以帮助。

回答by Luc Lérot

Well first of all, when you wanna work on deleting a picture that has been uploaded, you have to work on the template-downloadand not the template-upload.

首先，当您想删除已上传的图片时，您必须处理template-download而不是template-upload。

template-upload is used to preview what's gonna be uploaded, and once uploaded, it comes back in the template-download.

template-upload 用于预览将要上传的内容，一旦上传，它就会返回到模板下载中。

Therefore, the template to be overwritten in your case should be template-download. There's a good example on how to do that here : https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine.

因此，在您的情况下要覆盖的模板应该是template-download。这里有一个关于如何做到这一点的好例子：https: //github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine。

NOTE 1:the node that would be dynamicaly removed is targeted by the CSS class template-download. So you should try to position that class to different position within your code (I used divs and it works for me). The "fade" class is used for transition effect.

注意 1：将被动态删除的节点是 CSS 类模板下载的目标。因此，您应该尝试将该类定位到代码中的不同位置（我使用了 div，它对我有用）。“fade”类用于过渡效果。

HOWEVER,it seems that there's some errors within this documentation (probably from an upgrade of the module that has not been reported in the doc).

但是，此文档中似乎存在一些错误（可能来自文档中未报告的模块升级）。

The following code extract for rewriting the template-download will not work

以下用于重写模板下载的代码摘录将不起作用

row.find('.delete')
    .attr('data-type', file.delete_type)
    .attr('data-url', file.delete_url);

because de fileobject doesn't have any delete_typenor delete_urlparameters but deleteTypeand deleteUrlparameters. That is for Jquery File Upload version 8.9.0, tho' (the older version might work).

因为 de文件对象没有任何delete_type和delete_url参数，只有deleteType和deleteUrl参数。这适用于Jquery 文件上传版本 8.9.0，tho'（旧版本可能有效）。

So the delete button would not have the correct values if you simply copy'n'paste the code from the doc, therefore, it won't work either.

因此，如果您只是从文档中复制'n'粘贴代码，删除按钮将不会具有正确的值，因此它也不起作用。

The correct code to make the delete button work when overwritting the template-download is

覆盖模板下载时使删除按钮工作的正确代码是

row.find('.delete')
    .attr('data-type', file.deleteType)
    .attr('data-url', file.deleteUrl);

For me, the following code works just fine.

对我来说，下面的代码工作得很好。

 $('#fileupload').fileupload({  
    downloadTemplateId: '',
    downloadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $( '<div class="template-download fade"><span class="preview"></span>' +
                (file.error ? '<div class="error"></div>' : '') +
                '<button class="delete">Delete</button></div>');
            //row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.name').text(file.name);
                row.find('.error').text(file.error);
            } else {
               // row.find('.name').append($('<a></a>').text(file.name));
                if (file.thumbnailUrl) {
                    row.find('.preview').append(
                        $('<a></a>').append(
                            $('<img>').prop('src', file.thumbnailUrl)
                        )
                    );
                }
                row.find('a')
                    .attr('data-gallery', '')
                    .prop('href', file.url);
                row.find('.delete')
                    .attr('data-type', file.deleteType)
                    .attr('data-url', file.deleteUrl);
            }
            rows = rows.add(row);
        });
        return rows;
    }
});