2

我需要在网页界面上为使用嵌入式 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>

我有 Microchip customHTTPApp.c 代码可用，但是在这里发布太麻烦了。

如果需要，我可以发送电子邮件或聊天。我没有发布图片的代表，而且我的 Web 界面站点位于独立版块中，因此没有链接。

预先感谢您的帮助！

-乔什

4

1 回答 1

1

一个基本的大纲/想法：

  • 使用 JavaScript 超时每 N 秒轮询一次 URL setTimeout(1000*N), "getProgress()");：。这是从 onchange 为您的type="file" input标签调用的
  • 您的 JS getProgress 函数向 URL 发出 Ajax 请求：http//localhost/uploadProgress
  • 如果文件未完成上传，您的 JS getProgress 函数还会对其自身（相同的代码）再次调用 setTimeout。
  • 您的进度 URL 以 JSON 字符串的形式返回当前上传文件进度的百分比（可能是字节？）：{progress:"50"}
  • 有一个 N 像素宽度的 DIV 和一个宽度等于 Ajax 调用返回的百分比值id="progress-complete"的嵌套 DIVid="progress"

如果有帮助，请告诉我是否可以扩展。我只是在你需要某个地方开始的情况下发布这个。

于 2012-02-10T22:53:00.097 回答