jsp

最新推荐文章于 2022-05-19 23:47:25 发布

原创最新推荐文章于 2022-05-19 23:47:25 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JSP #Ajax #XML #HTML

本文介绍了一种使用Ajax技术结合jQuery插件实现文件上传过程中显示进度条的方法。通过禁用提交按钮防止重复提交，并在文件上传完成后重新启用按钮并隐藏进度条，展示上传结果。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>Ajax Process Bar</title>

<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// 等待DOM加载
function showProgressBar() {
document.getElementById("sendButton").disabled=true;
document.getElementById("progressBar").style.visibility="visible";
}
$(document).ready(function() {
// 绑定"#myForm"，然后加入回调函数
var options = {
dataType: 'xml' ,
success: function(responseXML) {
document.getElementById("progressBar").style.visibility="hidden";
document.getElementById("sendButton").disabled=false;
var message = $('message', responseXML).text();
alert(message);
}
};
$('#myForm').ajaxForm(options);

});
</script>
<head>
<body>

<form id="myForm" action="upload.do" method="post" enctype="multipart/form-data" onsubmit="showProgressBar();">
学生编码：<input type="text" name="code" value="001"><br>
学生姓名：<input type="text" name="name" value="zhangsan"><br>
附件1：<input type="file" name="file1" id="file1"><br>
附件2：<input type="file" name="file2" id="file2"><br>

<div id="progressBar"
style = visibility:hidden>
<img src="progress_bar.gif"/><font>正在上传，请等待......</font>
</div>

<input type="submit" value="提交" id="sendButton" >
<input type="reset">

</form>

<body>
</html>