拖放上传 - 有趣的行为

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 中的某个地方，尽管我以前从未使用过 所以也可能是这样。我确实阅读了有关 的文档，默认情况下，它不应该影响我的表格布局。

这是我的代码：

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

有人能看出是什么导致了这个额外的 出现吗？我的脚本的其余部分我理解并且可以修复，但我真的还没有得到这个新的 HTML5 文件 API 以及如何打印它的结果。

另外，有人知道如何重置文件名和文件大小。我问是因为每次上传后，我都会将更多文件拖到我的放置区，并且会显示以前选择的文件以及新文件，并不断积累，直到我刷新浏览器？

预先非常感谢

Answer 1

正如@Gerben 所说，“烦人的空白表格行！！！”看起来与您从未在脚本中删除的 tr.uploadTemplate 非常相似。尝试更改您的模板

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

以确认这一点。

如果您实际上在某处删除了模板行，并且空白行确实是由您的 JS 添加的，那么我首先在​​文件枚举器中添加 console.log() 调用（function(key, file)）看看是否会再叫一次加时赛。如果是，则问题出在您发布的代码之外 - 您必须检查 files 值的来源。