layui表单和文件上传
近期用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表单和文件上传就结束了，第一次写博客，有点生疏，有什么不对的地方请大佬多多指教
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
