Question

原谅问题标题，想不出怎么形容这个......

基本上，使用一些不同的脚本/教程，我已经成功地实现了拖放，文件上传功能（适用于Firefox，Safari和Chrome用户）。

它的效果非常好，但我对文件名和文件大小的显示方式有一个非常简单但很难的问题。

而不是这种格式：

<tr>
<th>File Name</th><th>100kb</th>
</tr>
<tr>
<td>File 1</td><td>100kb</td>
</tr>
<tr>
<td>File 2</td><td>145kb</td>
</tr>

我得到了这个：

<tr>
<th>File Name</th><th>100kb</th>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td> ///// Annoying blank table row!!!
</tr>
<tr>
<td>File 1</td><td>100kb</td>
</tr>
<tr>
<td>File 2</td><td>145kb</td>
</tr>

这种情况发生在我的Javascript中我认为，虽然我之前从未使用过<TBODY>，所以也可以。我确实阅读了关于<TBODY>的文档，默认情况下，它不应该影响我的表格布局。

这是我的代码：

<table width="100%" id="uploadInfoTbl">
    <tr>
      <th>File</th>
      <th>Size</th>
    </tr>
  <tbody id="uploadQueue">
    <tr class="uploadTemplate">
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<script>
createFileQueue : function(files)
{
  $('tbody#uploadQueue').find('tr').not('.uploadTemplate').remove();

  $(files).each(
    function(key, file) {
      var tr = $('tr.uploadTemplate').clone();

      tr.removeClass('uploadTemplate');
      tr.attr('id', 'file-' + key);

      if (file.type.match(new RegExp('/image.*/')) && FileReader) {
        // Displaying a thumbnail doesn't seem to work in Safari
        var img = document.createElement('img');
        img.file = value;
        img.classList.add('thumbnail');

        // tr.find('tr').eq(0).html(img);

        var reader = new FileReader();

        reader.onload = (function(img) {
          return function(e) {
            img.src = e.target.result;
          };
        })(img);

        reader.readAsDataURL(value);
      }

      tr.find('td').eq(0).html(file.name);
      tr.find('td').eq(1).html(dnd.getFileSize(file.size));

      $('tbody#uploadQueue').append(tr);
    }
  );
},
</script>

有人能看到导致额外<TR>出现的原因吗？我理解并修复了我的其余部分，但我还没有获得这个新的HTML5文件API以及如何从中打印结果。

此外，是否有人知道如何重置文件名和文件大小。我问，因为每次上传后，我会将更多文件拖到我的drop-zone中，并显示之前选择的文件以及新文件，并在我刷新浏览器之前不断积累？

非常感谢提前

Answer 1

正如@Gerben所说，“烦人的空桌排!!!”看起来非常类似于您从未在脚本中删除的tr.uploadTemplate。尝试将模板更改为

<tr class="uploadTemplate">
  <td>TEMPLATE</td>
  <td>TEMPLATE</td>
</tr>

以确认。

如果你实际上删除了某个地方的模板行并且确实添加了空行，那么我首先要在你的文件枚举器（function(key, file)）中添加console.log（）调用，看它是否被调用一个额外的时间。如果是，问题超出了您发布的代码 - 您必须检查files值的来源。

拖放上传 - 有趣的行为

1 个答案: