Привет, я пытаюсь разработать простую форму загрузки файлов на веб-странице с индикатором выполнения. Я использую 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>
, наконец, получил его работу ... обновил мой ответ. –