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

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

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

Кроме того, кто-нибудь знает, как сбросить имена файлов и размеры файлов. Я спрашиваю, потому что после каждой загрузки я перетаскиваю еще <tr class = "uploadTemplate" > <td> TEMPLATE </ td> <td> TEMPLATE </ td> </ tr> в свою зону размещения, и отображаются предыдущие выбранные файлы , а также новые, и продолжает накапливаться, пока я не обновлю браузер?

Спасибо заранее

javascript,jquery,html5,drag-and-drop,filereader,

0

Ответов: 1


1 принят

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

function(key, file)

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

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

JavaScript, JQuery, html5, перетащить и падения, FileReader,
Похожие вопросы