上传参数

给上传按钮设置的参数。

data-upload-exts

用法1：设置扩展名

直接设置扩展名，通过|拼接。

data-upload-exts="jpg|png|gif"

用法2：系统默认的扩展名

具体扩展名见下面：

data-upload-exts="*"

用法4：不限制扩展名

留空即可。

data-upload-exts=""

用法4：使用系统默认的扩展名分组

具体分组见下面。

// 系统支持的图片
data-upload-exts="*image"
// 系统支持的音乐
data-upload-exts="*music"

data-upload-icon

当图片失效时，预览的图片。但其他非图片文件会自动匹配对应类型的预览图标。一般不需要处理，系统会自动匹配。

如图，svg的图片会预览显示，但压缩包会显示为图标。

data-upload-accept

该参数将传递给layui的upload组件，参考：https://layui.gitee.io/v2/docs/modules/upload.html#options

data-upload-filename-field

可以将文件的原名赋值到另一个字段上。

系统默认扩展名

上面的介绍了很多属性都会用到系统默认的扩展名，具体的内容如下：

{
    // 图片扩展名数组
    'image': ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'ico', 'webp', 'svg'],
    // word扩展名数组
    'word': ['doc', 'docx'],
    // excel扩展名数组
    'excel': ['xls', 'xlsx'],
    // ppt扩展名数组
    'ppt': ['ppt', 'pptx'],
    // pdf扩展名数组
    'pdf': ['pdf'],
    // 压缩文件扩展名数组
    'zip': ['zip', 'rar', '7z'],
    // 文本文件扩展名数组
    'txt': ['txt'],
    // 音乐文件扩展名数组
    'music': ['mp3', 'wma', 'wav', 'mid', 'm4a'],
    // 视频文件扩展名数组
    'video': ['mp4', 'avi', 'wmv', '3gp', 'flv'],
    // visio扩展名数组
    'visio': ['vsd', 'vsdx'],
    'file': []
}

具体以源代码为准

当我们希望上传图片时，可以使用*image，此时要求扩展名为['jpg', 'jpeg', 'png', 'gif', 'bmp', 'ico', 'webp', 'svg']。

如果希望上传视频时，可以使用*video，此时要求的扩展名为['mp4', 'avi', 'wmv', '3gp', 'flv']。

如果希望上传以上所有的，直接使用*。

如果不限制扩展名，留空即可。

额外的分组

• *office
  • word,excel,ppt,pdf
• *media
  • image,music,video

框架对部分扩展名进行了组合，比如office，由word,excel,ppt,pdf组合。所以同时支持*office的写法。此时可以设置：data-upload-exts="*office"，这样将这些分组的扩展名。

示例

    <div class="layui-form-item">
        <label class="layui-form-label required">用户头像</label>
        <div class="layui-input-block layuimini-upload">
            <input name="head_img" class="layui-input layui-col-xs6" lay-verify="required" lay-reqtext="请上传用户头像" placeholder="请上传用户头像" value="/static/common/images/head.png">
            <div class="layuimini-upload-btn">
                <span><a class="layui-btn" data-upload="head_img" data-upload-number="one" data-upload-exts="*image" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                <span><a class="layui-btn layui-btn-normal" id="select_head_img" data-upload-select="head_img" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
            </div>
        </div>
    </div>