javascript - 所需文件上传进度条

Question

我需要在使用嵌入式 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 界面站点位于独立版中，因此没有链接。

预先感谢您的帮助!

-乔希

Answer 1

基本大纲/想法:

• 使用 JavaScript 超时每 N 秒轮询一次 URL:setTimeout(1000*N), "getProgress()");。这是从 onchange 为您的 type="file" input 标签
调用的
• 您的 JS getProgress 函数向 URL 发出 Ajax 请求:http//localhost/uploadProgress
• 如果文件未完成上传。
• 您的进度 URL 返回当前正在上传的文件作为 JSON 字符串的百分比(也许是字节？)进度:{progress:"50"}
• 有一个 N 像素宽度的 DIV id="progress-complete" 和一个宽度等于百分比值的嵌套 DIV id="progress"由您的 Ajax 调用返回

如果有帮助，请告诉我是否可以对此进行扩展。我只是发布这个，以防您需要从某个地方开始。