Drag and Drop Upload - забавное поведение - PullRequest
Новая
       8

Drag and Drop Upload - забавное поведение

0 голосов
/ 16 октября 2011

Извините за вопрос, не могу придумать, как это описать ..

По сути, используя несколько различных сценариев / учебных пособий, мне удалось получить работающую функцию перетаскивания и загрузки файлов вместе (для пользователей 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 File API и как распечатать результаты из него.

Кроме того, кто-нибудь знает, как сбросить имена файлов и размеры файлов. Я спрашиваю, потому что после каждой загрузки я перетаскиваю больше файлов в свою зону размещения, и отображаются предыдущие выбранные файлы, а также новые, и продолжает собираться, пока я не обновлю браузер?

Большое спасибо заранее

1 Ответ

1 голос
/ 16 октября 2011

Как сказал @ Гербен, "Раздражающая пустая строка таблицы !!!"выглядит очень похоже на tr.uploadTemplate, который вы никогда не удаляете в своем скрипте.Попробуйте изменить свой шаблон на 

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

, чтобы подтвердить это.

Если вы действительно удалите строку шаблона где-нибудь, и пустая строка действительно добавится вашим JS, я бы начал сдобавив вызовы console.log () в ваш перечислитель файлов (function(key, file)), чтобы увидеть, вызывается ли он один раз.Если это так, проблема не в том коде, который вы разместили, - вам нужно проверить, откуда взято значение files.

...