模板引擎


本插件使用 JavaScript 模板引擎来渲染文件列表。你可以在项目页面上找到此模板引擎的相关文档。

不过呢,这个指定的模板引擎也不是非用不可,你只需要设置好 uploadTemplateIddownloadTemplateIduploadTemplatedownloadTemplate 配置项便可以替换成你自身想要实现的模板:

$('#fileupload').fileupload({
    uploadTemplateId: null,
    downloadTemplateId: null,
    uploadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<tr class="template-upload fade">' +
                '<td><span class="preview"></span></td>' +
                '<td><p class="name"></p>' +
                '<div class="error"></div>' +
                '</td>' +
                '<td><p class="size"></p>' +
                '<div class="progress"></div>' +
                '</td>' +
                '<td>' +
                (!index && !o.options.autoUpload ?
                    '<button class="start" disabled>Start</button>' : '') +
                (!index ? '<button class="cancel">Cancel</button>' : '') +
                '</td>' +
                '</tr>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.error').text(file.error);
            }
            rows = rows.add(row);
        });
        return rows;
    },
    downloadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<tr class="template-download fade">' +
                '<td><span class="preview"></span></td>' +
                '<td><p class="name"></p>' +
                (file.error ? '<div class="error"></div>' : '') +
                '</td>' +
                '<td><span class="size"></span></td>' +
                '<td><button class="delete">Delete</button></td>' +
                '</tr>');
            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('button.delete')
                    .attr('data-type', file.delete_type)
                    .attr('data-url', file.delete_url);
            }
            rows = rows.add(row);
        });
        return rows;
    }
});

有几点需要注意下:

  • uploadTemplatedownloadTemplate 方法只能要么返回一个 jQuery 对象,要么返回一段能够渲染出 upload / download 模板内容的 html 字符串。
  • 通过 add 回调传递的 data 参数会通过 .data() 函数存储在所渲染的模板中,然后在文件提交上传(或删除)的时候拿来复用。
  • 我们要给 upload 模板的元素添加一个 template-upload 类,download 模板则是添加一个 template-download 类,这样 start 和 cancel 处理程序便能取到 data 参数,以及用于 delete 处理程序将变动后的 data 参数传递回模板。
  • 如果你不要模板呈现任何过渡效果,将模板中的 fade 类删掉即可。

或者,你也可以定义一个 window.tmpl 的模板方法,该方法会传入一个 id 参数,你要根据不同 id 返回对应的函数。所返回的函数要以 data 为参,并返回用来渲染模板内容的 html 字符串或 jQuery 对象:

window.tmpl = function (id) {
    if (id === 'template-upload') {
        return function (data) {
            return '<tr class="template-upload"><!-- ... --></tr>';
        };
    }
    if (id === 'template-download') {
        return function (data) {
            return '<tr class="template-download"><!-- ... --></tr>';
        };
    }
}

以下是 Mustache / Handlebars 中模板的样子:

template-download

<tr class="template-download fade">
{{#error}}
  <td></td>
  <td class="name"><span>{{name}}</span></td>
  <td class="size"><span></span></td>
  <td class="error" colspan="2">
      <span class="label label-important">{{error}}</span></td>
{{/error}}
{{^error}}
      <td class="preview">
          {{#thumbnail_url}}
          <a href="{{url}}"><img src="{{thumbnail_url}}"></a>
          {{/thumbnail_url}}
      </td>
      <td class="name">
          <a href="{{url}}">{{name}}</a>
      </td>
      <td class="size"><span>{{fmtFileSize}}</span></td>
      <td colspan="2"></td>
{{/error}}
  <td>
      <button class="btn btn-danger delete" data-type="{{delete_type}}" data-url="{{delete_url}}">
          <i class="icon-trash icon-white"></i>
          <span>Delete</span>
      </button>
      <input type="checkbox" name="delete" value="1" class="toggle">
  </td>
</tr>

template-upload

<tr class="template-upload fade">
    <td class="preview"><span class="fade"></span></td>
    <td class="name">{{name}}</td>
    <td class="size">{{fmtFileSize}}</td>

{{#error}}
    <td class="error" colspan="2">{{error}}</td>
{{/error}}
{{^error}}
        <td>
            <div class="progress">
                <div class="bar" style="width:0%;"></div>
            </div>
        </td>
        <td>
            <button class="btn btn-primary start">
                <i class="icon-upload icon-white"></i>
                <span>Start</span>
            </button>
        </td>
    <td>
        <button class="btn btn-warning cancel">
            <i class="icon-ban-circle icon-white"></i>
            <span>Cancel</span>
        </button>
    </td>
{{/error}}

</tr>