首先需要引入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>