Question

我有一个简单网页的以下代码，我想让用户上传，跟踪上传进度，然后在上传完成后重定向它们（我需要在thr服务器端做）这样做很好没有底部脚本来显示上传进度。 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>

Answer 1

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

您可以将RSS作为回复的一部分发送，然后使用JavaScript中的window.location或window.navigate重定向到新网址。

jQuery上载脚本后，服务器端重定向无法正常工作

1 个答案: