HTML-индикатор выполнения с использованием черри и JavaScript

Привет, я пытаюсь разработать простую форму загрузки файлов на веб-странице с индикатором выполнения. Я использую cherrypy 3.2, поскольку сервер и файл успешно загружаются. Моя проблема заключается в том, что индикатор выполнения отображается, но не обновляется в веб-браузере во время процесса загрузки. Я знаю, что функция prompt() вызывается, потому что окно предупреждения отображается, когда я нажимаю кнопку «Загрузить», не выбирая сначала файл.HTML-индикатор выполнения с использованием черри и JavaScript

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

стороне сервера:

class filedrop(object): 
    def index(self): 
     return open('index.html') 
    index.exposed = True 

    def upload_handler(self, myFile, mySize): 
     fileName = os.path.split(myFile.filename)[1] 
     chunksize = round(int(mySize)/10) 
     fo = open('C:/Sprint 16/' + fileName, 'wb') 
     while True: 
      data = myFile.file.read(int(chunksize)) 
      if not data: 
       sys.stderr.write("\n") 
       break 
      fo.write(data) 
     fo.close() 
     raise cherrypy.HTTPRedirect("/") 
    upload_handler.exposed = True 
cherrypy.quickstart(filedrop())

'index.html' файл

<head><script type="text/javascript" src="/jquery-1.4.2.min.js"></script></head> 
<body> 
    <b>Upload Files To This Directory</b><br><br> 
    <form id="form" action="upload_handler" method="POST" enctype="multipart/form-data" name="Uform" onsubmit="return prompt()"> 
     <input type="file" name="myFile" id="upFile" /><br /> 
     <input type="submit" value=" Upload"/> 
     <input type="hidden" name="mySize" id="fileSize"/> 
    </form> <progress id="progBar" max="100" value="0"></progress> 
    <script> 
     function prompt(){ 
      var x=document.forms["Uform"]["myFile"].value; 
      if(x==null || x==""){ 
       alert("No file chosen. Please go back and try again"); 
       return false; 
      } 
      var input = document.getElementById("upFile"); 
      var size = input.files[0].size; 
      var sizeField = document.getElementById("fileSize"); 
      sizeField.value = size; 

      var xhr = new XMLHttpRequest(); 
      xhr.upload.addEventListener("progress", updateProgress, false); 
      xhr.open("POST", "upload_handler"); 
     } 
     function updateProgress(evt){ 
      if(evt.lengthComputable){ 
       var percentComplete = (evt.loaded/evt.total)*100; 
       var progressBar = document.getElementById("progBar"); 
       proressbar.value = percentComplete;        
      } 
     } 
    </script> 
</body>

источник

2014-02-20 BeeLabeille

, наконец, получил его работу ... обновил мой ответ. –

Вот что я работаю ...

<head><script type="text/javascript" src="/jquery-1.4.2.min.js"></script></head> 
<body> 
    <b>Upload Files To This Directory</b><br><br> 
    <!--<form id="form" action="/filedrop/upload_handler" method="POST" enctype="multipart/form-data" name="Uform" onsubmit="return prompt()">--> 
     <input type="file" name="myFile" id="upFile" /><br /> 
     <input type="submit" value=" Upload" onclick="prompt();"/> 
    <!-- <input type="hidden" name="mySize" id="fileSize"/> 
    </form>--> <progress id="progBar" max="100" value="0"></progress> 
    <script> 
     function prompt(){ 
      var x=document.getElementById("upFile").value; 
      if(x==null || x==""){ 
       alert("No file chosen. Please go back and try again"); 
       return false; 
      } 
      var input = document.getElementById("upFile"); 
      //var size = input.files[0].size; 
      //var sizeField = document.getElementById("fileSize"); 
      //sizeField.value = size; 

      var data = new FormData(); 
      data.append('myFile', document.getElementById("upFile").files[0]); 

      var xhr = new XMLHttpRequest(); 
      xhr.upload.addEventListener("progress", updateProgress, false); 
      xhr.open("POST", "upload_handler"); 
      xhr.send(data); 
     } 
     function updateProgress(evt){ 
      if(evt.lengthComputable){ 
       var percentComplete = (evt.loaded/evt.total)*100; 
       var progressBar = document.getElementById("progBar"); 
       progressBar.value = percentComplete;        
      } 
     } 
     </script> 
</body>

* .py-файл:

import cherrypy 
import os 

class filedrop(object): 
    def index(self): 
     return open('index.html') 
    index.exposed = True 

    def upload_handler(self, myFile): 
     fo = open(os.path.dirname(__file__) + "/" + myFile.filename, 'wb') 
     all_data = bytearray() 
     while True: 
      data = myFile.file.read(8192) 
      all_data += data 
      if not data: 
       break 
     fo.write(all_data) 
     fo.close() 
     #raise cherrypy.HTTPRedirect("/") 
    upload_handler.exposed = True 
cherrypy.quickstart(filedrop())

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

источник

2014-02-20 14:49:26

Спасибо, Андрей, попробуем это и вернемся к вам. – BeeLabeille

Привет, Андрей, просто попробовал то, что вы предложили, и, к сожалению, это не имело никакого значения для индикатора прогресса. Спасибо в любом случае – BeeLabeille

Обновлен мой ответ ... попробуйте это. –

HTML-индикатор выполнения с использованием черри и JavaScript

ответ

Смежные вопросы