我正在编写一个文件上传网络应用程序。它目前是一个带有 php 条件的 3 步表单。
我有上传器工作。但我想知道是否有一种方法可以在没有 AJAX 用户的情况下创建进度条。我有一个与 jQuery 和 ajax 完美配合的进度条,但是在文件上传完成后,表单没有提交并转到确认页面并回显结果和变量等。
真的没有简单的方法可以在不需要 ajax 的情况下使用 php 和 jquery/javascript 跟踪文件上传百分比吗?疯狂地试图解决这个问题。
使用此 jquery 进度条代码上传文件
<script type="text/javascript" language="javascript" src="script/jquery-progress-form.js"></script>
<script>
$(document).ready(function()
{
$("#ajax_up").click(function(){
var options = {
beforeSend: function()
{
$("#progress").show();
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'><div style='height:1000px;'>"+response.responseText+"</div></font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
});
</script>
<style>
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:10px; border-radius: 3px; padding-bottom:10px; }
#percent { position:absolute;top:3px; left:48%; }
</style>
<h2 style="font-family:Arial, Helvetica, sans-serif;">Upload Image</h2>
<form id="myForm" name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="file" name="image" size="30" id="image" />
<input type="submit" name="upload" value="Upload" class="buttoni2m_1" id="ajax_up" /><br />
</form> <br />
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<div id="message"></div><br />