Question

我在我们的网站上运行了jquery文件上传插件： https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine

然而，它使用的是一次与jquery绑定的java脚本模板语言，但已经停止并从jquery中删除。我与之合作的人希望我删除插件的模板引擎部分，然后用直接的javascript编写。由于不支持模板语言，因此在代码中使用模板语言并不舒服。

我在这里找到了文档中关于在JS中创建自己的模板引擎的地方，我想这就是我需要做的事情。

https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine

我不确定是否有更多关于模板语言的知识也可能对我有所帮助，我已经查看了几个网站。

我现在正在度假，但是当我一周回来时，我需要开始研究这个问题。

我已经写了大量的javascript和jquery的东西，但我并不总是非常熟悉所有的习语，在某些情况下我复制并粘贴代码示例。

这是您自己的模板引擎的代码示例。我猜它会设置回调.. 我基本上必须剪切并粘贴它，看它是否有效。我确实试过了，但最初它对我不起作用。

$('#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 class="preview"><span class="fade"></span></td>' +
             '<td class="name"></td>' +
             '<td class="size"></td>' +
             (file.error ? '<td class="error" colspan="2"></td>' :
                    '<td><div class="progress">' +
                        '<div class="bar" style="width:0%;"></div></div></td>' +
                        '<td class="start"><button>Start</button></td>'
              ) + '<td class="cancel"><button>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(
                  locale.fileupload.errors[file.error] || 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">' +
            (file.error ? '<td></td><td class="name"></td>' +
                '<td class="size"></td><td class="error" colspan="2"></td>' :
                    '<td class="preview"></td>' +
                        '<td class="name"><a></a></td>' +
                        '<td class="size"></td><td colspan="2"></td>'
            ) + '<td class="delete"><button>Delete</button> ' +
                '<input type="checkbox" name="delete" value="1"></td></tr>');
        row.find('.size').text(o.formatFileSize(file.size));
        if (file.error) {
            row.find('.name').text(file.name);
            row.find('.error').text(
                locale.fileupload.errors[file.error] || file.error
            );
        } else {
            row.find('.name a').text(file.name);
            if (file.thumbnail_url) {
                row.find('.preview').append('<a><img></a>')
                    .find('img').prop('src', file.thumbnail_url);
                row.find('a').prop('rel', 'gallery');
            }
            row.find('a').prop('href', file.url);
            row.find('.delete button')
                .attr('data-type', file.delete_type)
                .attr('data-url', file.delete_url);
        }
        rows = rows.add(row);
    });
    return rows;
}

}）;

这是我在文件加载完成后调用的一段代码。这是否需要与上述代码结合使用？

为什么这段代码在表单的某种匿名函数中 $（function（）{$（“＃fileupload”）。fileupload（）{...

另一个代码示例不在匿名函数中......也许它并不重要？

$(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {                          
         var str = "<h4>" + data.result.name + '  -  ' + data.result.text_status + "</h4>";
         console.log(str);
         <% if @ie %>
           data.context.html(str);
           $("#files_tbody").append("<tr>" + str + "</tr>");
         <% else %>
           data.context.html(str);
         <% end %>
    }
  });
});

我尝试将这两个代码段分开，如上所示，我的上传不起作用，我尝试将它们组合如下，这也不起作用.. 任何关于我缺少什么或在哪里看的建议都将受到赞赏..

使用下面的代码块，我在firebug中得到文件加载错误：

TypeError：$（“＃fileupload”）。fileupload不是函数 downloadTemplate：function（o）{

还有：

TypeError：document.getElementById（a）为null ... urn {“\ n”：“\ n”，“\ r”：“\ r”，“\ t”：“\ t”，“”：“”} [a] ||“\”+ a;如果（c）返回c ===“=”？“'+ ...

$('#fileupload').fileupload({
   dataType: 'json',
    done: function (e, data) {                          
         var str = "<h4>" + data.result.name + '  -  ' + data.result.text_status + "</h4>";
         console.log(str);
         <% if @ie %>
           data.context.html(str);
           $("#files_tbody").append("<tr>" + str + "</tr>");
         <% else %>
           data.context.html(str);
         <% end %>
    }
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function (o) {
    var rows = $();
    $.each(o.files, function (index, file) {
        var row = $('<tr class="template-upload fade">' +
            '<td class="preview"><span class="fade"></span></td>' +
            '<td class="name"></td>' +
            '<td class="size"></td>' +
            (file.error ? '<td class="error" colspan="2"></td>' :
                    '<td><div class="progress">' +
                        '<div class="bar" style="width:0%;"></div></div></td>' +
                        '<td class="start"><button>Start</button></td>'
            ) + '<td class="cancel"><button>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(
                locale.fileupload.errors[file.error] || 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">' +
            (file.error ? '<td></td><td class="name"></td>' +
                '<td class="size"></td><td class="error" colspan="2"></td>' :
                    '<td class="preview"></td>' +
                        '<td class="name"><a></a></td>' +
                        '<td class="size"></td><td colspan="2"></td>'
            ) + '<td class="delete"><button>Delete</button> ' +
                '<input type="checkbox" name="delete" value="1"></td></tr>');
        row.find('.size').text(o.formatFileSize(file.size));
        if (file.error) {
            row.find('.name').text(file.name);
            row.find('.error').text(
                locale.fileupload.errors[file.error] || file.error
            );
        } else {
            row.find('.name a').text(file.name);
            if (file.thumbnail_url) {
                row.find('.preview').append('<a><img></a>')
                    .find('img').prop('src', file.thumbnail_url);
                row.find('a').prop('rel', 'gallery');
            }
            row.find('a').prop('href', file.url);
            row.find('.delete button')
                .attr('data-type', file.delete_type)
                .attr('data-url', file.delete_url);
        }
        rows = rows.add(row);
    });
    return rows;
  }
});

Answer 1

'TypeError：$（“＃fileupload”）。fileupload'消息可能意味着您以'无冲突'模式加载jQuery：http://api.jquery.com/jQuery.noConflict/ 这例如是完成的。通过wordpress引擎。这里建议一个解决方案（来自http://api.jquery.com/jQuery.noConflict/）：

恢复$别名，然后创建并执行一个函数在函数范围内提供$作为jQuery别名。在 - 的里面函数原始$对象不可用。这适用于大多数插件不依赖于任何其他库。

jQuery.noConflict();
(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

jquery文件上传插件模板引擎？

1 个答案: