如何自定义Blueimp jQuery File Upload的上传/下载模板 [英] How to customize Upload/Download Template of Blueimp jQuery File Upload

问题描述

我正在尝试使用 jQuery文件上传演示。我通过 wiki &模板引擎维基但无法找到如何自定义上传/下载模板而不使用表行标记的答案。每次我删除/更改表格行标签时它都不起作用。

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 =errorcolspan =2>< / div>'：
'< div>< div class =progress>'+ 
'< div class =barstyle =width：0％;>< / div>< / div>< / div>'+ 
'< div class =start><按钮>开始< /按钮>< / div>'
）+'< div class =cancel><按钮>取消< / button>< / div>< / div>< ; / div>< / li>'）; 
 row.find（'。name'）。text（file.n ame）; 
 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）; 
}）; 
返回行; 
}，
  

解决方案

从查看示例我创建了这个jsbin的现场演示： http://jsbin.com/ivonow/1/ / p>

这是演示中的代码。我取出了html底部的jQuery模板，并将上面的uploadTemplate函数添加到设置fileupload对象时传入的选项。

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

  {
 uploadTemplateId：null ，
 downloadTemplateId：null，
} 
  

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

希望这会有所帮助。

I'm trying to use the jQuery File Upload Demo. 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.

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

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;
    },

解决方案

From looking at the examples and the live demo I created this 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.

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

{
  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.

Hope this helps.

这篇关于如何自定义Blueimp jQuery File Upload的上传/下载模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！