精华内容
下载资源
问答
  • layui upload文件类型上传及上传文件限制类型 实际需求的话是用户通过不同对应的入口,上传多种类型的文件,并且在选择文件的时候,只能看到选择的文件类型。 点击不同的入口,限制选择的文件类型 这是...

    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.upload.render({ acceptMime: ‘image/*’, multiple:true, type: ‘image’, ext: ‘jpg|png|gif|bmp|jpeg’, });

    新增意外情况

    如果桌面有某文件的快捷方式 ,快捷方式也属于图片,所以最根本的就是修改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...

    图片/文件上传 - 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("上传失败!");
                }
            });
    
    
    展开全文
  • <p>layui 文件上传upload组件怎么设置上传时文件格式筛选,文件格式类型为ceb;<br> 在accept Mine_type 中没有找到对应ceb格式的,或者说有什么可以自己设置上传文件类型限制的</p>
  • 使用layui.upload上传文件与使用layer.open方式上传文件。上传文件的方式有很多种,这里简单介绍以下两种方式。... //指定允许上传的文件类型 upload.render({ elem: '#uploadExcel'//绑定导入按钮 ,

    使用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>
    
    展开全文
  • 刚开始的时候以为只需要返回一个主键,就想返回一个String类型的字符串就行了,结果每次上传图片后都会提示“请求上传接口出现异常”,然后就在一顿的找啊找,心想也没有问题啊 后来,就去网上找解决办法,后来在...
  • jsp代码上传文件js代码layui.use(['element','upload'], function() {element = layui.element...//指定允许上传的文件类型upload.render({elem: '#uploadExcel',url: path+'/FacjudgController/uploadImg.do',acc...
  • 关于layui.upload的before上传前对文件类型及文件大小判断,阻止默认上传实现方法【下图代码是对图片上传是宽高限制处理】: layui.use(['upload', 'form'], function () { var upload = layui.upload; var ...
  • 效果:HTML代码:多文件选择上传文件预览图:layui.use('upload', function()...var uploadInst = upload.render({elem: '#uploadId',accept: 'file', //指定允许上传时校验的文件类型,可选值有:images(图片)、fil...
  • 在做图片上传时使用layui文件上传: https://www.layui.com/demo/upload.html 这个我只用了第一个 “常规使用:普通图片上传” 写好后一直出现“请求上传接口出现异常”的异常。 后来检查发现是在controller...
  • 单独的文件上传html文件upload模块快速使用上传封面 layui.use('upload', ...//执行实例var uploadInst = upload.render({elem:'#cover',url:'/admin/test/upload',accept:'file' // 允许上传的文件类型,before...
  • &lt;script&gt; layui.use('upload', function(){ var $ = layui.jquery, upload = layui.upload; //指定允许上传的文件类型 upload.render({ elem: '#test3' ,u...
  • button class="layui-btn" id="upload" lay-data="{url: '/XXX/upload', accept: 'file'}">批量导入</button> upload.render({ elem: '#upload' ,method: 'post' //可选项。HTTP类型...
  • layui中的文件上传

    2019-11-04 17:53:24
    layui.use(‘upload’, function(){ var $ = layui.jquery ,upload = layui.upload; upload.render({ //允许上传的文件后缀 ...,accept: ‘file’ //指定接收的文件类型 ,exts: ‘xls|xlsx|csv’ //指定上传文件...
  • upload-layui

    2019-04-17 00:37:28
    layui 为节省服务器开销,以下示例均未配置真实上传接口,所以每次上传都会报提示:请求上传接口出现异常,这属于正常现象。 ... 常规使用:普通图片上传 ... 指定允许上传的文件类型 上传文件 只允...
  • 出错:上传文件成功,但是前端一直跳到error方法,提示上传失败信息,本例子原后台返回数据为string类型,前端Ajax异步请求,控制层为@@RestController。 解决办法:后台返回类型改为Map<String,Object> 代码...
  • html代码导入考勤模板js代码layui.use(['upload'],function(){var $ = layui....//指定允许上传的文件类型upload.render({elem: '#importFile',url: port.getAttendanceListURL("import_attendance"),accept: ...
  • 最近动用到layui组件上传视频,后来发现视频稍微大一点就上传不了,看了官方文档也没有头绪,后来上网查了一下,发现是因为web.config需要设置并添加一点东西才可以使用,代码如下: ... //指定允许上传的文件类型
  • java+layui的Excel数据导入 页面 upload.render({ elem: '#import' ,url: '/risen/phgov/personManager/personBase/excelDataUpload.do' //改成您... ,accept: 'file' //允许上传的文件类型 ,acceptMime: 'applic
  • // 获得文件类型 String fileType = file.getContentType(); if ("image/jpeg".equals(fileType) ||"image/jpg".equals(fileType) ||"image/png".equals(fileType)) { ...
  • <link href="~/Content/layui/css/layui.css" rel="stylesheet" /> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">...div class="layui-upload">
  • 前端 //导入excel文件 layui.use('upload', function() { var upload =layui.upload; //指定允许上传的文件类型 var uploadInst = upload.render...
  • 最近使用layui发现,在页面上传了图片可以用以下方式清除文件队列,在此做下笔记 let uploadInst = upload.render({ elem: '#test1' //绑定元素 ,url: 'up.php' //... ,accept: "images"//允许上传的文件类型 ...
  • 前端上传使用layui.upload组件,具体参考Layui手册 php: //主逻辑 //限制上传表格类型 $file_type = $_FILES['excel_import']['type']; if ($file_type!='application/vnd.ms-excel') { return [RESULT_ERROR,'上传...
  • 基于layui框架,实现从jsp页面...这里为layui 的js 部分和 htmlvar uploadInst = upload.render({elem: '#uploadBtn' //上传按钮的id,accept: 'images' // 上传文件类型,auto: false,size: 1024 * 1024 * 2 //上传...

空空如也

空空如也

1 2
收藏数 34
精华内容 13
关键字:

layuiupload文件类型