0

我有一个简单网页的以下代码，我想让用户上传，跟踪上传进度，然后在上传完成后重定向它们（这我需要在服务器端做）它工作得很好，没有底部显示上传进度的脚本。ajax 调用中是否存在阻止重定向的内容？我的后端是 Google App Engine 上的 Python，我很乐意展示代码，但我认为它不相关。

<style>
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>


<div class="row">
    <div class="span12">
        <div class="center-it"><h1>Upload a Video:</h1><br>
        </div>

        <form action="{{upload_url}}" method="POST" enctype="multipart/form-data">
            <input type="file" name="file" class="btn"><br> 
            <input type="submit" name="submit" value="Submit" class="btn"> 
        </form>

    </div>
</div>

    <div class="progress progress-striped active">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

#without everything below this line it works just fine
<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();       
</script>
4

1 回答 1

1

如果没有 Ajax，它可以工作，因为表单被提交到服务器上的不同页面，然后您可以重定向到另一个 URL。使用 Ajax 虽然它仍然在同一页面中并且只接收来自服务器的响应。

您可以将 URL 作为响应的一部分发送，然后在 JavaScript 中使用window.location或window.navigate重定向到新的 URL。

于 2013-07-24T01:14:11.903 回答