使用ajax代替form表单向服务器同时提交多个数据和多个文件
JSP代码
一个form表单包含多个数据以及多个文件
在form表单中加入属性 enctype=“multipart/form-data” 表示此表单支持文件上传;
需正确引用jquery, jquery.form等js文件。
<!--表单内容-->
<form id="form-survey-record" method="post" action="" enctype="multipart/form-data">
<div class="tab-pane active" id="tab-form">
<div class="row data-type">
<div class="col-md-2 title">标题</div>
<div class="col-md-10 data">
<input type="text" id="survey-record-name"
name="surveyRecordTitle" class="form-control" placeholder="标题" value="">
</div>
<div class="col-md-2 title">类型</div>
<div class="col-md-4 data">
<select id="surveyrecord-type" name="surveyRecordType" class="form-control">
<option value="0">全部类型</option>
<option value="1">上级考评</option>
</select>
</div>
<div class="col-md-2 title rowHeight2x">备注</div>
<div class="col-md-10 data rowHeight2x">
<textarea class="form-control" id="survey-record-remarks" name="remarks" rows="3"
placeholder="请输入..."></textarea>
</div>
<div class="col-md-2 title">题目文件</div>
<div class="col-md-10 data">
<input type="file" name="surveyQuestionFile" id="survey-question-file"/>
</div>
<div class="col-md-2 title">选项文件</div>
<div class="col-md-10 data">
<input type="file" name="surveyOptionsFile" id="survey-options-file">
</div>
<div class="col-md-2 title"></div>
<div class="col-md-10 data text-center">
<button type="button" class="btn btn-primary ladda-button" onclick="saveSurveyRecord()"><span class="ladda-label">保存</span></button>
<button type="button" class="btn bg-default ladda-button" onclick="history.back(-1);">返回</button>
</div>
</div>
</div>
</form>
<!--表单内容/-->
function saveSurveyRecord(){
//检查输入
...
var option = {
url:"XXX/newSurveyRecord",
async:false, //是否异步?
type : 'POST',
dataType : 'json',
headers : {"ClientCallMode" : "ajax"}, //添加请求头部
beforeSend: function(){
//在发送之前的逻辑
},
success:function (data) {
//提交成功的逻辑
}, error:function () {
//失败的逻辑
}, complete:function(){
//不管成功失败都执行的逻辑(类似于finally)
}
};
$("#form-survey-record").ajaxSubmit(option);//form表单实际提交
return false; //最好返回false,因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交
}
#后端Action配置
<action name="newSurveyRecord" class="XX.SurveyRecordImportAction" method="newSurveyRecord">
<result name="success" type="json">
<param name="root">dto</param>
</result>
</action>
public class SurveyRecordImportAction{
private String surveyRecordTitle;
private String surveyRecordType;
private String relateSurveyId = "";
private String remarks;
private File surveyQuestionFile; //接收上传的题目excle
private File surveyOptionsFile; //接收上传的选项excle
public String newSurveyRecord(){
...
}
//getter setter
}