Question

我需要在使用嵌入式Microchip TCP / IP堆栈Pic32板的客户端的网页界面上显示上传进度指示器。在网页中，我有一个上传文件页面，允许客户端浏览并选择适当的.hex或.wav文件上传到电路板内存，从而最终能够引导该文件。我的问题是，当文件上传时，客户端不知道文件正在进行，并可能从页面导航，从而取消下载。我需要一个指示器来显示上传的进度，以便让客户知情。请记住，我有5个上传框，用于需要上传的不同实例。我一次只允许上传一次。

这是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代码，但在此处发布太麻烦了。

如果需要，我可以发送电子邮件或聊天。我没有代表发布图片，我的网站界面是独立的，所以没有链接。

提前感谢您的帮助！

-Josh

Answer 1

基本概要/想法：

使用JavaScript超时每N秒轮询一次网址：setTimeout(1000*N), "getProgress()");。这是从type="file" input代码
您的JS getProgress函数向URL发出Ajax请求：http//localhost/uploadProgress
您的JS getProgress函数还会再次调用setTimeout（相同的代码）if 该文件尚未完成上传。
您的进度网址会返回当前上传的文件百分比（字节可能？）作为JSON字符串的进度：{progress：＆＃34; 50＆＃34;}
具有N像素宽度id="progress-complete"的DIV和a 嵌套DIV id="progress"，宽度等于百分比值通过Ajax调用返回

如果有帮助，请告诉我是否可以扩展。我只是在你需要某个地方开始的时候张贴这个。

需要的文件上传进度条

1 个答案: