近期用layui写了一个在表单中上传文件，因为这个表单和文件上传让我费劲了脑汁，因为第一次使用layui所以很多东西摸不清楚，后来查了资料才知道layui文件上传和from表单提交是异步的，分为两次提交，接下来我们详细介绍
话不多说，先上代码 html代码：
<form class="layui-form" id="userForm" enctype="multipart/form-data" method="post"> <div class="layui-form-item"> <label class="layui-form-label">下拉框</label> <div class="layui-input-block"> <select name="main_id" lay-filter="shiPinFenLei" class="status1"> <option value="0">请选择</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">文本框</label> <div class="layui-input-block"> <input type="text" name="son_name" required lay-verify="required" placeholder="输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">选择地区</label> <div class="layui-input-block"> <select name="aid" lay-filter="biaoti" class="area"> </select> </div> </div> <div class="layui-form-item" id="charge"> <label class="layui-form-label">是否付费</label> <div class="layui-input-block"> <input type="radio" lay-filter="charge" name="ChargeType" value="1" title="付费"> <input type="radio" name="ChargeType" lay-filter="charge1" value="2" title="免费"> </div> </div> <div class="layui-form-item" id="charge"> <label class="layui-form-label">视频类型</label> <div class="layui-input-block"> <input type="radio" name="status" value="1" title="类型1"> <input type="radio" name="status" value="2" title="类型2"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">文本域</label> <div class="layui-input-block"> <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item" id="urltop"> <label class="layui-form-label">文件路径</label> <div class="layui-input-block"> <input type="text" name="url" required lay-verify="required" placeholder="此框不可进行更改" id="url" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr><th>文件名</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr></thead> <tbody id="demoList"></tbody> </table> </div> <button type="button" class="layui-btn" id="testListAction"><i class="layui-icon layui-icon-file-b"></i>开始上传</button> </div> <div class="layui-form-item" style="margin-left: 60%"> <div class="layui-input-block"> <button class="layui-btn btn-submit" lay-filter="demo1" lay-submit="" id="commit">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form>js代码：
<script> layui.use(['form', 'layer', 'upload'], function() { var form = layui.form, $ = layui.$; //只有执行了这一步，部分表单元素才会自动修饰成功 var layer = layui.layer; var upload = layui.upload; $("#urltop").hide(); form.render(); $.ajax({ url : "main_List", dataType : "json", type : "post", success : function(data) { console.log(data); for ( var i in data) { var sec = data[i]; $(".status1").append("<option value="+sec.main_id+">"+sec.main_name+"</option>") } form.render();//菜单渲染 把内容加载进去 } }) form.on('radio(charge)',function (data){ $("#price").remove(); $("#charge").after("<div class='layui-form-item' id='price'>" +" <label class='layui-form-label'>请输入价格</label>" +" <div class='layui-input-block'>" +" <input type='text' name='price' placeholder='请输入价格' autocomplete='off' class='layui-input'>" +" </div>" +" </div>") }); form.on('radio(charge1)',function (data){ $("#price").remove(); }); form.on('select(shiPinFenLei)',function(data){ $(".area").empty(); $.ajax({ url : "area_List", dataType : "json", type : "post", data:{"id":$(".status1").val()}, success : function(data) { console.log(data); for ( var i in data) { var sec = data[i]; $(".area").append("<option value="+sec.aid+">"+sec.area+"</option>") } form.render();//菜单渲染 把内容加载进去 } }) }) //上传文件代码，我这里是上传的视频 var demoListView = $('#demoList') ,uploadListIns = upload.render({ elem: '#testList' ,url: 'vedioLoad' ,exts:'mp4|wmv|avi|dmv|amv|3GP|rmvb|flv' ,accept: 'video' ,multiple: true ,auto: false ,bindAction: '#testListAction' ,choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 //读取本地文件 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">' ,'<td>'+ file.name +'</td>' ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>' ,'<td>等待上传</td>' ,'<td>' ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>' ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>' ,'</td>' ,'</tr>'].join('')); //单个重传 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function(){ delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 }); demoListView.append(tr); }); } ,done: function(res, index, upload){ if(res.code == 0){ //上传成功 var tr = demoListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html(''); //清空操作 $("#url").val(res.data);//上传成功后把得到的参数赋值给我这里的url路径这个文本框中 return delete this.files[index]; //删除文件队列已经上传成功的文件 } this.error(index, upload); } ,error: function(index, upload){ var tr = demoListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); //当文件已经上传成功后，得到从后端返回到前端的文件上传路径，伴随着form表单一起提交 form.on('submit(demo1)',function (data){ var fd = new FormData(); var formData = new FormData($( "#userForm" )[0]); $.ajax({ cache : true, type : "post", url : "vedioAdd", async : false, data : formData, // 你的formid contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件 processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data error : function(request) { layer.alert('操作失败', { icon: 2, title:"上传失败" }); }, success : function(ret) { if (ret.success) { layer.alert(ret.msg, { icon: 1, title:"提示" }); setTimeout(function () { window.location.href="videoUpload"; },2000); } } }) return false; }) }); </script>这样的话，文件先上传，form表单后提交，两者不冲突，文件上传后得到从后端返回到前端的文件上传的路径，随着form表单一起提交到数据库中 到这，form表单和文件上传就结束了，第一次写博客，有点生疏，有什么不对的地方请大佬多多指教
