首先,文件上传在layui中虽然是独立的模块,但是其如果也在表单中的话,也是可以随着表单建立formData对象的。故此只需要将其模块中的提交去掉,从而用ajax来提交formDate表单就可以了。
这是一段上传文件的代码
html代码
<form class="layui-form" action="#" enctype="multipart/form-data" id="up_form">
<div class="layui-upload uploadbuchong" id="fileshow" style="border:1px solid #00F7DE; border-radius: 2px;">
<button class="layui-btn layui-btn-normal" type="button">选择文件</button>
</div>
<button class="layui-btn layui-btn-normal" lay-submit="" id="upup" lay-filter="upup">提交</button>
</form>
js代码
关闭了提交按钮,将在下面的ajax提交中随表单一起提交
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;
//文件上传 已关闭
upload.render({
elem: '#supplement_file'
, url: 'http://192.168.0.10/admin/demo/demo'
, accept: 'file'
, auto: false
// , bindAction: '#upfile' //关闭的上传按钮 html中此id所在元素也被注释
,multiple: true
, done: function (res) {
alert("上传成功");
}
});
})
ajax代码 建立formdata对象代码 提交按钮点击事件调用
function fsubmit(fd) {
$.ajax({
url: "php",
type: "POST",
data: fd,
async : false,
contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
error : function(request) {
parent.layer.alert("网络超时");
},
success: function (data) {
alert("上传成功!");
}
});
return false;
}
$("#upup").on("click",function () {
var formSatellite = document.getElementById("up_form");//获取所要提交form的id
var fs1 = new FormData(formSatellite); //用所要提交form做参数建立一个formdata对象
fsubmit(fs1);//调用函数
})
ok了传上去了