精华内容
下载资源
问答
  • 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 实现多文件上传

    千次阅读 2020-07-07 11:54:06
    layui upload 实现多文件上传 ** js引用:layui.js 下面展示代码: var opera = layer.open({ type: 1, title: '批量导入', area: ['720px', '440px'], // 宽高 btnAlign: 'r', //'l'按钮左对齐,'c'按钮居中...

    **

    layui upload 实现多文件上传

    **

    js引用:layui.js

    下面展示代码:

    var opera = layer.open({
                        type: 1,
                        title: '批量导入',
                        area: ['720px', '440px'], // 宽高
                        btnAlign: 'r', //'l'按钮左对齐,'c'按钮居中对齐,'r'按钮右对齐,默认右边
                        shadeClose: false, // 点击阴影关闭弹框
                        closeBtn: false,
                        content: '<div class="layui-upload">' +
                            '  <button type="button" style="margin-top: 10px;margin-left: 10px;" class="btn btn-primary btn-sm btn-rounded mgnR15" 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>' +
                            '<div class="footer-div">' +
                            '  <button type="button" class="upload-btn0" id="testListAction">导入锁具信息</button>' +
                            '  <button type="button" class="upload-btn1" οnclick="closeUpload()">取消</button>' +
                            '</div>' +
                            '</div> ',
                        success: function () {
                            layui.use('upload', function () {
                                var $ = layui.jquery,
                                    upload = layui.upload;
                                //多文件列表示例
                                var demoListView = $('#demoList'),
                                    uploadListIns = upload.render({
                                        elem: '#testList',
                                        url: '/lockInfo/uploadExcel', //上传接口
                                        accept: 'file', //指定允许上传时校验的文件类型
                                        multiple: true, //是否允许多文件上传
                                        exts: 'xls|xlsx',
                                        auto: false, //是否选完文件后自动上传
                                        bindAction: '#testListAction', //指向一个按钮触发上传
                                        number: 10, //设置同时可上传的文件数量
                                        field: 'uploadExcel', //设定文件域的字段名
                                        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 / 1024).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.files.file) { //上传成功
                                                var tr = demoListView.find('tr#upload-' + index),
                                                    tds = tr.children();
                                                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                                tds.eq(3).html(''); //清空操作
                                                return delete this.files[index]; //删除文件队列已经上传成功的文件
                                                layer.close(opera);
                                            }
                                            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'); //显示重传
                                        }
                                    });
                            })
    
                            // 关闭批量导入弹窗
                            window.closeUpload = function () {
                                layer.close(opera);     //执行关闭   
                            }
    
                        }
                    });
    
    展开全文
  • 在before中可以写方法 重新赋值 ,before: function(obj){ layer.load(); //上传loading this.data={'id':$("#id").val()}; }
    在before中可以写方法 重新赋值
     ,before: function(obj){
                    layer.load(); //上传loading
                    this.data={'id':$("#id").val()};
                }
    
    展开全文
  • 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',
    });
    

    在这里插入图片描述

    展开全文
  • 项目中上传文件时,需在headers中带上token,但是由于一进入页面就已经upload.render,此时如果用户没有登录,token为null,上传失败。 而且由于用户在当前页面弹框登录后,页面并没有刷新,不会触发upload.render...
  • 图片/文件上传 - layui.upload 点击跳转到Layui官网文件上传页面 找到设置文件上传类型的设置的参数 代码 <div class="layui-upload-drag" id="test10"> <i class="layui-icon"></i> <p...
  • 1 HTML代码 <input type='button' id='selectFile' value='选择文件'> <div id='fileDiv'></div> 2 JS代码 ... layui.use(['upload'], function () { var upload = layui.uploa
  • 后台获取不到值方法一: <script> layui.use('upload', function () { ... var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#test1' //绑定元素 ...
  • <p>layui 文件上传upload组件怎么设置上传时文件格式筛选,文件格式类型为ceb;<br> 在accept Mine_type 中没有找到对应ceb格式的,或者说有什么可以自己设置上传文件类型限制的</p>
  • 使用layui.upload上传文件与使用layer.open方式上传文件。上传文件的方式有很多种,这里简单介绍以下两种方式。... //指定允许上传的文件类型 upload.render({ elem: '#uploadExcel'//绑定导入按钮 ,
  • layui 文件上传upload

    千次阅读 2019-03-06 11:36:54
    //指定允许上传的文件类型 upload.render({ //允许上传的文件后缀 elem: '#upload' , url: '/project/archives/uploadFile' , multiple: true , accept: 'file' //普通文件 // , exts: 'zip|rar|7z' //只允许...
  • 文档中提及不支持 ie8、9 跨域上传文件,测试虽然不同域,但是生产环境一定是同域的,所以最后还是选择layui.upload。其他现代浏览器表现良好,但是,后来同域环境ie9 以下浏览器发现如下问题及解决过程。 文件成功...
  • LayUI中的layui.upload可以使用各种样式,比传统的Asp.net中FileUpload更为简洁方便。 这里参考了一位博主的链接:Asp.net中Excel数据导入到SQL Server 前端 首先定义一个上传按钮: <button style="float:right;...
  • https://www.layui.com/demo/upload.html 这个是官网,那里有示例以及代码 比如其中一个 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
  • 图片/文件上传 - layui.upload

    千次阅读 2018-03-28 16:42:19
    图片/文件上传 - layui.upload普通上传文件是借助 type="file" 的 input 标签来完成的, 这太low了本文是利用 layui 做 两种情况下的图片上传 服务器端是ThinkPHP3.2实例一: (点击上传即保存数据库)upload....
  • layuiupload加了文件大小限制

    万次阅读 2017-07-31 16:53:13
    @Title: layui.upload文件上传 - 全浏览器兼容版 @Author: 贤心 @License:MIT */layui.define('layer' , function(exports){ "use strict"; var $ = layui.jquery; var layer = layui.layer; var device =...
  • 刚开始的时候以为只需要返回一个主键,就想返回一个String类型的字符串就行了,结果每次上传图片后都会提示“请求上传接口出现异常”,然后就在一顿的找啊找,心想也没有问题啊 后来,就去网上找解决办法,后来在...
  • 前段以及JS代码内容,注意demo1只是为了预览图片用的,所以上传其他文件会报错 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="../../commons/common.jsp" %> &...
  • 前言 最近在准备找工作的事项,但是...图片/文件上传 - layui.upload 上传模块自 layui 2.0 的版本开始,进行了全面重写,这使得它不再那么单一,它所包含的不仅是更为强劲的功能,还有灵活的 UI。任何元素都可以作为上
  • layui文件上传

    2021-01-18 11:04:37
    div class="layui-upload"> <button class="layui-btn layui-btn-normal" id="testList" type="button">选择文件</button> <div class="layui-upload-list"> <table class="layui-table...
  • layui-文件上传

    2021-07-01 13:09:06
    1.设置一个按钮 ;; type=button class=layui-btn id=elem 2.layui.use();方法中,引入upload模块 3.调用upload.render(options)方法 options是一个对象 ...accept(上传文件类型限制) acceptMine(指定打开文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,075
精华内容 430
关键字:

layuiupload文件类型