Question

我正在玩blueimp的jQuery-File-Upload Demo。我过去几天一直在研究它，我想我对它是如何工作有很好的理解。但是，我对网页开发的经验很少，而且有一个问题让我很感兴趣。

在演示的Basic-UI-Plus部分，使用JavaScript-Templates

显示排队等待上传的文件（通过“添加”按钮选择的文件）

 <table role="presentation" class="table table-striped">
        <tbody class="files"></tbody>
 </table>

将呈现模板，并将其输出放置在具有＆＃34;文件的块中。类。在这个例子中，它是＆＃34; tbody＆＃34;块。

但是，如果我尝试从模板输出表格标签：

<div class="files">
     <!-- Template's output comes here: it will contain <table></table> -->
</div>

根据FireBug的DOM查看器，一切都将按预期呈现，但表格将不可见。经过不同布局的测试后，我意识到如果我删除＆＃34; fade＆＃34;来自＆＃34; tr＆＃34;使用模板生成然后表格将可见，但演示将无法按预期工作。现在，两个启动按钮都不起作用。

以下是两个jsfiddles：

The working one将正确显示排队文件表。当按下两个“开始”中的任何一个时，蓝色按钮，它会尝试上传，并说服务器没有按预期找到。

The strange one不会显示任何表格，尽管它在firebug中正确显示。删除＆＃34; fade＆＃34;上课或添加＆＃34; in＆＃34;如下所示，所有内容都将显示，但没有一个开始按钮可以正常工作。

任何人都可以向我解释实际发生了什么吗？谢谢！

Answer 1

拥有fade课程时，元素完全不透明，这就是您没有看到它的原因。要使其再次可见，您还必须将in类添加到其中。在视觉上它可以正常工作，请参阅http://jsfiddle.net/xkych55n/1/并注意HTML代码中第163行的细微差别。

Answer 2

问题是脚本认为文件是“files”容器的直接子代。

因此，如果您有<table role="presentation" class="table table-striped"><tbody class="files">，则会找到包含这些文件的<tbody>个<tr>的子项。

如果您将其更改为<div class="files"><tableclass="table"><tbody>，则会认为<table>元素是文件而不是<tr>。

我只想将HTML更改为<div class="files"><table role="presentation" class="table table-striped"><tbody class="files"></tbody></table></div>，其余部分保持不变。没有必要更改javascript。

另一种方法是完全摆脱表格，只要确保文件是容器的直接子节点......例如：

容器：

<div class="files"></div>

模板：

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <div class="template-upload fade">
        <div>
            <span class="preview"></span>
        </div>
        <div>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </div>
        <div>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </div>
        <div>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </div>
    </div>
{% } %}
</script>

然后，你必须修复造型。的 Here a working jsfiddle.

注意：您在第191和236行上有错误。</table></tbody>应为</tbody></table>。

通过jquery添加时，表不可见，按钮不起作用

2 个答案: