使用cherrypy和JavaScript的HTML进度条_Javascript_Jquery_Html_Progress Bar_Cherrypy

使用cherrypy和JavaScript的HTML进度条

javascript jquery html

使用cherrypy和JavaScript的HTML进度条,javascript,jquery,html,progress-bar,cherrypy,Javascript,Jquery,Html,Progress Bar,Cherrypy,大家好，我正在尝试开发一个简单的基于网络的文件上传表单和进度条。我正在使用cherrypy 3.2作为服务器，文件正在成功上传。我的问题是，在上传过程中，进度条会出现，但不会在web浏览器中更新。我知道正在调用函数prompt（），因为当我单击“上载”按钮而不首先选择文件时，会显示一个警报框我在下面包含了我的代码。如果我遗漏了什么，请告诉我。任何帮助都将不胜感激。谢谢服务器端： class filedrop(object): def index(self): retu

大家好，我正在尝试开发一个简单的基于网络的文件上传表单和进度条。我正在使用cherrypy 3.2作为服务器，文件正在成功上传。我的问题是，在上传过程中，进度条会出现，但不会在web浏览器中更新。我知道正在调用函数prompt（），因为当我单击“上载”按钮而不首先选择文件时，会显示一个警报框

我在下面包含了我的代码。如果我遗漏了什么，请告诉我。任何帮助都将不胜感激。谢谢

服务器端：

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>


将文件上载到此目录




函数提示符（）{
var x=document.forms[“Uform”][“myFile”].value；
如果（x==null | | x==“”）{
警报（“未选择文件。请返回并重试”）；
返回false；
}
var input=document.getElementById（“upFile”）；
var size=input.files[0]。大小；
var sizeField=document.getElementById（“文件大小”）；
sizeField.value=大小；
var xhr=new XMLHttpRequest（）；
addEventListener（“progress”，updateProgress，false）；
xhr.open（“POST”、“upload_handler”）；
}
函数更新进程（evt）{
if（evt.长度可计算）{
var percentComplete=（evt.loaded/evt.total）*100；
var progressBar=document.getElementById（“progBar”）；
PropressBar.value=完成百分比；
}
}

以下是我的工作成果

<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>

我认为问题在于proressbar在脚本标签的底部拼写错误，表单正在发布并将您从提供进度更新的页面上删除，而您并没有真正将文件发送到服务器端。如果你还有什么问题，请告诉我。

希望这有帮助

谢谢Andrew，我会尝试一下，然后回复你。嗨，Andrew，刚刚尝试了你的建议，不幸的是，它对进度条没有任何影响。无论如何谢谢你更新了我的答案。。。试试这个。不幸的是，这仍然没有什么不同。我觉得我错过了一些非常明显的东西，但我不知道是什么。我真的很感谢你的帮助。谢谢，我看到一个问题。。。我相信你的表单提交绕过了你的js。我将表单标记更新为onsubmit=“return prompt（）；”看看这是否有帮助。终于让它工作了。。。更新了我的答案。

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())