layui表单和文件上传

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表单和文件上传就结束了，第一次写博客，有点生疏，有什么不对的地方请大佬多多指教