필요한 파일 업로드 진행률 표시 줄

Question

임베디드 마이크로 칩 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> 

나는 마이크로 칩 customHTTPApp.c 코드를 사용할 수 있습니다,하지만 여기에 게시 할 너무 복잡합니다.

필요한 경우 이메일을 보내거나 채팅 할 수 있습니다. 나는 사진을 게시 할 담당자가 없으며 웹 인터페이스 사이트는 독립 게시판에 있으므로 링크가 없습니다.

도움을 위해 미리 감사드립니다!

-Josh

Answer 1

기본 개요/아이디어 :

• 가 사용 자바 스크립트 시간 제한은 URL마다 N 초 폴링 : setTimeout(1000*N), "getProgress()");. 이것은 당신의 type="file"input 태그 onchange를 호출된다
• 귀하의 JS getProgress 함수는 URL에 Ajax 요청합니다
: 파일이 완성 http//localhost/uploadProgress는
• 귀하의 JS getProgress 기능도 자체 (동일한 코드)에의 setTimeout 다시 호출을하지 경우 업로드 중.
• 귀하의 진행 URL은 (아마도 바이트?) 비율에서 현재 업로드 파일 진행을 반환하는 JSON 문자열로 : {진행 : "50"}로 id="progress-complete"과 중첩 된 DIV id="progress" 폭
• 은 N 픽셀의 DIV 되세요 너비가 백분율 값과 같습니다. 은 Ajax 호출에서 반환했습니다.

유용 할 경우 확장 할 수 있는지 알려주세요. 나는 당신이 어딘가 시작할 필요가있는 경우에 이것을 게시하고 있습니다.