Требуется индикатор загрузки файла - PullRequest
Новая
       4

Требуется индикатор загрузки файла

2 голосов
/ 11 февраля 2012

Мне нужно отобразить индикатор выполнения загрузки на интерфейсе веб-страницы для клиента, использующего встроенную плату Microchip TCP / IP стек Pic32. На веб-странице у меня есть страница файла загрузки, которая позволяет клиенту просматривать и выбирать соответствующий файл .hex или .wav для загрузки в память платы и, таким образом, иметь возможность в конечном итоге загрузить этот файл. Моя проблема заключается в том, что при загрузке файла клиент не знает о ходе выполнения файла и может перейти со страницы и, таким образом, отменить загрузку. Мне нужен индикатор, чтобы показать ход загрузки, чтобы клиент был в курсе. Имейте в виду, у меня есть 5 ящиков для загрузки для разных экземпляров, которые необходимо загрузить. Я разрешаю только 1 загрузку за раз.

вот код раздела html: 

    <table width="900" border="0" cellpadding="1" class="uploadTable">
      <tr>
        <td width="420" rowspan="2"><form action="fileupload.html" method="post"   enctype="multipart/form-data">
          <div class="uploadBox"> 
            <p><b>Update Primary System Firmware</b></p>
            <p>File: 
              <input type="file" name="firmwaremain" size="30" />
              &nbsp;
              <input type="submit" value="Upload" />
            </p>
          </div>
        </form></td>
        <td width="252" height="23"><div align="center"><strong>Current File Name:  </strong></div></td>
        <td width="104"><div align="center"><strong>Current File Size:</strong></div> </td>
        <td width="104"><div align="center"><strong>File Upload Date:</strong></div></td>
      </tr>
      <tr>
        <td height="40"><div align="center">~curFirmName~</div></td>
        <td width="104"><div align="center">~curFirmSize~</div></td>
        <td width="104"><div align="center">~curFirmDate~</div></td>
        </tr>
    </table>

У меня есть код MicroHip customHTTPApp.c, но он слишком громоздок для размещения здесь.

Я могу написать по электронной почте, если нужно, или пообщаться. У меня нет представителя, чтобы публиковать фотографии, и мой сайт с веб-интерфейсом находится на отдельной плате, поэтому никаких ссылок.

Заранее спасибо за помощь!

-Josh

1 Ответ

1 голос
/ 11 февраля 2012

Основная схема / идея:

  • Используйте тайм-аут JavaScript для опроса URL каждые N секунд: setTimeout(1000*N), "getProgress()");. Это вызывается из onchange для вашего type="file" input тега
  • Ваша функция JS getProgress делает Ajax-запрос к URL: http//localhost/uploadProgress
  • Ваша функция getProgress JS также снова вызывает setTimeout для себя (тот же код), если файл не загружен.
  • Ваш прогресс URL возвращает текущий загружаемый файл прогресс в процентах (возможно, в байтах?) в виде строки JSON: {прогресс: "50"}
  • Иметь DIV шириной N пикселей id="progress-complete" и вложенный DIV id="progress" с шириной, равной процентному значению возвращается вашим Ajax-вызовом

Дайте мне знать, могу ли я остановиться на этом, если это будет полезно. Я просто публикую это на тот случай, если вам нужно где-то начать.

...