您的当前位置:首页>全部文章>文章详情

layui上传插件使用exts属性指定上传文件的后缀名,并过滤掉其他格式的文件(格式过滤)

发表于:2023-04-19 10:59:05浏览:520次TAG: #ThinkPHP #layui #javascript

前端领域layui一直是一个不错的选择,集成了很多东西,使用起来有很方便,上手门槛低,是后台开发人员最喜欢的前端框架了,今天在使用layui上传文件的时候需要上传xls|xlsx表格文件的时候,发现官方的文档中并没有选择文件过滤其他的格式,选择起来很麻烦,然后网上搜索资料,优化了一下。

<input type='button' id='selectFile' value='选择文件'>
<div id='fileDiv'></div>
$(function(){
    initUpload();
});
//初始化上传组件
function initUpload(){
    layui.use(['upload'], function () {
        var upload = layui.upload;
        //单文件上传
        upload.render({
            elem: '#selectFile',
            url: "upload.aspx",
            accept: 'file',
            exts: 'xls|xlsx',//限制上传文件的后缀名,用|分隔
            acceptMime: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // 此处设置上传的文件格式
            multiple: false,
            auto: true,//是否自动上传,true自动上传,false手动上传
            size: 50 * 1024,//单位kb
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#fileDiv").val(file.name);
                });
            },
            done: function (res, index, upload) {
                if (res.Code == 1) { //上传成功
                    alert("上传成功");
                }
                else {
                    alert("上传失败!");
                }
            },
            error: function (index, upload) {
                alert("上传失败!");
            }
        });
    });
}

acceptMime拓展值

后缀 accept的MIME
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip
*.dotx application/vnd.openxmlformats-officedocument.wordprocessingml.template
*.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
*.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation
*.doc application/msword
*.dot application/msword
*.xls application/vnd.ms-excel
*.ppt application/vnd.ms-powerpoint