标签:rap ade normal ajaxform amp 附件 oda label 核心
现今的主流浏览器由于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);
});
jquery.form.js提交 input file中的文件
标签:rap ade normal ajaxform amp 附件 oda label 核心
原文地址:https://www.cnblogs.com/samve/p/12331625.html