layui upload 多文件类型上传及上传文件限制类型

实际需求的话是用户通过不同对应的入口，上传多种类型的文件，并且在选择文件的时候，只能看到选择的文件类型。




点击不同的入口，限制选择的文件类型





这是文件上传，类型限制最重要的几个属性，accept 我这里都是file ，都是文件类型。acceptMine这个属性是对应你调用成功后，筛选出对应文件类型的文件。exts是你设置可上传的文件类型，如果选择的其他类型的，是无法进行接口调用的。



excel类型
var uploader = upload.render({ 
    elem: '#uploadExcel',
    url: '/web/doc/table/upload',  //改成您自己的上传接口
    headers: { "X-Access-Auth-Token": token },
    accept: 'file',
    acceptMime: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    exts: 'xlsx|xls', //只允许上传excel文件
    choose: function(obj){
      var index = layer.load();
    },
    done: function(res, index, upload){
      layer.close(layer.index);
    },
    error: function(err) {}
  });

csv类型
    accept: 'file',
    acceptMime: '.csv',
    exts: 'csv', //只允许上传csv文件

txt类型
    accept: 'file',
    acceptMime: 'text/plain',
    exts: 'txt', //只允许上传txt文件

新增意外情况
如果桌面有某文件的快捷方式 ，快捷方式也属于图片，所以最根本的就是修改layui.all.js里的文字内容。

layui上传文件的upload.render中会出现所有的文件类型，但目前我只需要展示我需要上传的文件类型，如上传图片只展示所有的图片类型，视频就展示视频类型。


图片类型
layui.upload.render({
	acceptMime: 'image/*',
    ext: 'jpg|png|gif|bmp|jpeg',
});


视频类型
layui.upload.render({
	acceptMime: 'video/*',
    ext: 'mp4',
});

图片/文件上传 - layui.upload

点击跳转到Layui官网文件上传页面

找到设置文件上传类型的设置的参数



代码
<div class="layui-upload-drag" id="test10">
  <i class="layui-icon"></i>
  <p>点击上传，或将文件拖拽到此处</p>
  <div class="layui-hide" id="uploadDemoView">
    <hr>
    <img src="" alt="上传成功后渲染" style="max-width: 196px">
  </div>
</div>

upload.render({
    elem: '#test10'
    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
    ,done: function(res){
      layer.msg('上传成功');
      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
      console.log(res)
    }
  });


自行设置上传文件的后缀类型

exts: 'xls|xlsx|csv|zip|pdf|doc|docx|png|jpeg|jpg|gif'// 设置允许上传的格式
, exts: 'xls|xlsx|csv' 		Excel文件后缀
，exts: 'zip'				压缩包文件后缀
, exts: 'pdf'				PDF文件后缀
, exts: 'doc|docx'			Word文件后缀
, exts: 'png|jpeg|jpg|gif'	图片文件后缀

upload.render({
            elem: '#test10',
            url: "自己的上传接口",
            accept: 'file',
            exts: 'xls|xlsx|csv', //限制上传文件的后缀名，用|分隔
            done: function (res, index, upload) {
                if (res.Code == 1) { //上传成功
                    alert("上传成功");
                }
                else {
                    alert("上传失败！");
                }
            },
            error: function (index, upload) {
                alert("上传失败！");
            }
        });

使用layui.upload上传文件与使用layer.open方式上传文件。上传文件的方式有很多种，这里简单介绍以下两种方式。

第一种：layui.upload上传文件
layui.use(['layer','upload'], function () {
var upload = layui.upload;
        //指定允许上传的文件类型
        upload.render({
            elem: '#uploadExcel'//绑定导入按钮
            ,url: '/api/upload/file_excel' //上传请求接口地址
            ,accept: 'file' //普通文件
            ,exts: 'xls|excel|xlsx' //配置上传格式
            ,done: function(res){
                console.log(res)
                layer.msg(res.message);
            }
        });
    });

第二种：使用layer.open上传文件

1.绑定导出事件
function custexcelimport(){
	layer.open({
		   title: '导入数据',
		   type: 2,
		   offset: 'auto',
		   skin: 'layui-layer-demo', //样式类名
		   closeBtn: 1, //不显示关闭按钮
		   anim: 3, //弹出层样式
		   shadeClose: false, //开启遮罩关闭
		   area: ['340px', '200px'],
			content:'../mx/importbusinessbill.jsp',
		    end: function () {
		    	var handle_status = $("#handle_status").val();
		    	 var handle_data = $("#handle_data").val();
		    	 handle_data = JSON.parse(handle_data);
		    	 if ( handle_status == '0' ) {
		    		  layer.confirm(handle_data.msg, {btn: ['确定']}, 
				                function(index) {
				                	 if(index){
				                		 layer.close(index);
				                		 location.reload();
				                	 }
				                });
		    	 }else if(handle_status == '1'){
		    		 location.reload();
		    	 }
		    }
		  });
}

2.导入按钮与返回绑定数据的标签
<div id="mywin"></div>
<input id="handle_data" value="" hidden="hidden">
<input id="handle_status" value="" hidden="hidden">
<button type="button"  class="layui-btn layui-btn-sm layui-btn-normal" onclick="custexcelimport()">导入</button>

3.导入弹出页
<script type="text/javascript">
	function submitConfirm(){
	var index = parent.layer.getFrameIndex(window.name);
		if($('#uploadfile').val()==''){
		$.messager.alert('错误','请选择要上传的Excel文件','error');
			return;
		}
		if (!$('#uploadfile').val().toLowerCase().endWith('.xls')) {
		$.messager.alert('错误','文件类型不是xls文件','error');
		return;
		}
 		$.messager.confirm('信息', "确定导入?", function(r) {
 			if (r) {
			$.messager.progress();
				$('#myform').ajaxSubmit({
				 	url:"../importExcel.action",
				 	type: "post",
					success : function(data) {
						data = JSON.parse(data);
						$.messager.progress('close');
						parent.layer.close(index);
						if(data.success == false){
							data = JSON.stringify(data);
							parent.$("#handle_status").val("0");
							parent.$("#handle_data").val(data);
							parent.layer.close(index);
						}else{
							data = JSON.stringify(data);
							parent.$("#handle_status").val("1");
							parent.$("#handle_data").val(data);
							parent.layer.close(index);
						} 
					}
				});
 			}
 		});
	}
	
	function closetab() {
    	parent.$('#mywin').window('close');
    }
</script>
<style type="text/css">
.datagrid-btable .datagrid-cell{padding:6px 4px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}  
.ctable {
	margin: 0 auto;
	padding: 0;
}
</style>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'center',border:false" style="padding:10px;">

<form name="myform" id="myform" method="post" enctype="multipart/form-data">
<div style="width: 100%; height: 100px;">
	<table class="ctable" cellpadding="0" cellspacing="0" width="80%" border="0">
		<tr style="font-size: 13px">
			<td>
			<p>
			请选择要上传的Excel文件,xls格式:<!-- <a href="../download/businessbillcust.xls">参考模版下载</a> --><br>
			<br>
			<input type="file" id="uploadfile" name="uploadfile" class="textbox">
			</p>
			</td>
		</tr>
	</table>
</div>
</form>
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;margin-bottom:10px;">
	<center>
	<a id="Submitbtn" name="Submitbtn" style="width: 100px;height: 25px" class="easyui-linkbutton c6" onclick="submitConfirm()">导入</a>
	</center>
</div>
</div>
</body>