现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件,解决方案:
下面说说 jquery.form.min.js 插件,它是一款优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交。jquery.form.min.js 有两个核心方法ajaxForm()和ajaxSubmit(),下面以实例来简单说明其提交file文件方式:
<!-- Modal:更新授权 -->
<div class="modal fade" id="update-authorization-modal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title"> 更新授权 </h4>
</div>
<form id="update-authorization-modal-form" class="form-horizontal" action="">
<div class="modal-body">
<div class="form-group row">
<label
class="col-sm-3 col-md-3 col-lg-3 col-xl-3 control-label font-normal align-right">授权文件:</label>
<div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
<div class="file-input-container">
<input type="file" class="form-control file-input"
id="update-authorization-modal-file" name="updateAuthorizationModalFile" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="submit" class="btn btn-success">发送</button>
</div>
</form>
</div>
</div>
</div>
<script src="./static/libs/jquery-form/jquery.form-3.45.0.js"></script>
$('#update-authorization-modal-form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: [":disabled"],
fields: {
updateAuthorizationModalFile: {
message: '授权文件无效',
trigger: "change",
validators: {
notEmpty: {
message: '授权文件不能为空'
},
file: {
extension: 'war,rar,tar,zip,gz,bz2,deb',
mimeTypes: '.war,.rar,.tar,.zip,.gz,.bz2,.deb',
message: '文件类型为.war、.rar、.tar、.zip、.gz、.bz2、.deb'
}
}
}
}
}).on('success.form.bv', function (e) {
e.preventDefault();
var options = {
url: '/bmpf/softmng/software/add_software_package/',
success: showResponse,
dataType: "json"
};
function showResponse(response, status) {
if (response.ret) {
toastr.success("更新授权成功", "成功提示");
$('#update-authorization-modal-form')[0].reset();
$('#update-authorization-modal-form').data("bootstrapValidator").resetForm();
setTimeout(function () {
$("#update-authorization-modal").modal("hide");
}, 1000);
//$softTable.bootstrapTable("refresh");
}
else {
toastr.error(response.errMsg, "错误提示");
$('#update-authorization-modal-form').bootstrapValidator('disableSubmitButtons', false);
}
}
$('#update-authorization-modal-form').ajaxForm(options);
});
主要代码在“e.preventDefault();”后。
使用ajaxSubmit方法:
<form id="system-update-form" class="form-horizontal" method="POST" enctype="multipart/form-data">
<div class="form-group row margin-bottom-10">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 gray">
使用更新包对系统进行更新,更新后请重启服务器。
</div>
</div>
<div class="form-group row margin-bottom-5">
<label for="inputPassword"
class="col-sm-3 col-md-3 col-lg-3 col-xl-3 control-label font-normal padding-right-0">选择更新包:</label>
<div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 padding-right-0">
<div class="file-input-container"><input
class="form-control file-input" type="file"
id="system-update-form-file" name="systemUpdateFormFile" />
</div>
</div>
<div class="col-sm-2 col-md-2 col-lg-2 col-xl-2 padding-right-0">
<button type="submit" class="btn btn-default btn-sm">更新</button>
</div>
</div>
</form>
$('#system-update-form').bootstrapValidator(__assign({}, bootstrapValidatorConfig, {
fields: {
systemUpdateFormFile: {
message: '更新包无效',
validators: {
notEmpty: {
message: '更新包不能为空'
}
}
}
}
})).on('success.form.bv', function (e) {
e.preventDefault();
$('#system-update-form').ajaxSubmit({
url: "/bmpf/softmng/software/add_software_package/",
type: "post",
enctype: 'multipart/form-data',
// iframe: true,
dataType: 'json',
success: function (data) {
toastr.success("更新授权成功", "成功提示");
$('#update-authorization-modal-form')[0].reset();
$('#update-authorization-modal-form').data("bootstrapValidator").resetForm();
setTimeout(function () {
$("#update-authorization-modal").modal("hide");
}, 1000);
},
error: function (data) {
$('#update-authorization-modal-form').bootstrapValidator('disableSubmitButtons', false);
}
})
});