layui 图片展示添加一个x_XFile: 基于layui界面,实现表单文件上传,预览,基于cropperJS支持图片裁剪编辑...

该博客介绍了如何在layui界面中实现图片上传、预览和裁剪功能。利用layui的upload模块并结合cropperJS库,配置包括上传接口、文件类型限制、拖拽上传、选择文件后的回调函数等,以提供完整的图片处理体验。
摘要由CSDN通过智能技术生成

// 默认配置, 基于layui的upload模块配置做了一些添加

let defaultConfig = {

id: undefined, // 渲染的元素id

// base: "", // xFile组件的web访问路径,用于加载其它js,css使用,默认当前路径

url: undefined, // 服务端上传接口,返回的数据规范请详见下文

data: undefined, //请求上传接口的额外参数。如:data: {id: 'xxx'} , 从 layui 2.2.6 开始,支持动态表达式值

headers: undefined, //接口的请求头。如:headers: {token: 'sasasas'}。注:该参数为 layui 2.2.6 开始新增

// accept: 'images', //指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)

// acceptMime: 'image/*', //规定打开文件选择框时,筛选出的文件类型,值为用逗号隔开的 MIME 类型列表。如: acceptMime: 'image/*'(只显示图片文件) acceptMime: 'image/jpg, image/png'(只显示 jpg 和 png 文件) 注:该参数为 layui 2.2.6 开始新增

// exts: imgExts,//'jpg|png|gif|bmp|jpeg', //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值