首先需要引入jquery.form.js
之后即可使用
本示例为上传文件+form表单提交
使用的方法是提交地址写在form表单当中,在提交前进行检查工作,检查内容是否符合规范(是否为空),若为空则弹出提示信息,并不进行发送处理。
<%--
Created by IntelliJ IDEA.
User: 水之笔记
Date: 2017/3/9
Time: 22:02
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>上传获奖作品</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/is_null.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.form.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/competition_name.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#uploadForm").ajaxForm({
resetForm: true,
clearForm: true,
//定义返回JSON数据,还包括xml和script格式
dataType: 'json',
// 在发送之前进行的操作,如果有问题,返回false即可不会进行提交
beforeSend: function () {
//表单提交前做表单验证
if (isNull($("#name").val()) || isNull($("#year").val()) || $("#competition") == "请选择") {
alert("不能为空");
return false;
}
if ($("#file1").get(0).files[0] == null) {
alert("请至少上传源文件");
return false;
}
return true;
},
success: function (data) {
//提交成功后调用
alert(data.messageContent);
window.location.reload();
}
});
});
</script>
</head>
<body>
<div>
<form method="post" enctype="multipart/form-data" id="uploadForm"
action="${pageContext.request.contextPath}/background/worksInsert">
作品名称:<input type="text" name="name" id="name"><br>
参赛年份:<input type="text" name="year" id="year"><br>
参加竞赛:<select name="competition" id="competition">
<option value="请选择">请选择</option>
</select><br>
源文件上传:<input type="file" name="file1" id="file1"><br>
展示文件上传:<input type="file" name="file2" id="file2"><br>
附件上传:<input type="file" name="file3" id="file3"><br>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>