php cms 存储过程,迅睿CMS 自定义单文件上传组件存储过程

本文详细解析如何使用layui的单文件上传组件进行前端文件上传,涉及参数配置、URL设置、文件类型限制,以及如何将上传文件ID映射到后台的File字段,并提供成功上传提示的代码实例。适合前端开发者学习文件上传与后端接口对接技巧。
摘要由CSDN通过智能技术生成

0472ac3d32a7917020e63ac267043417.png

前端使用了layui的单文件上传组件来上传文件,那么后台如何来正确存储入库呢

比如这个字段名称叫shangchuan,对应我们的后台的字段,File类型入库

a76a4a2785b87d005b44a94eb7d8c13b.png

效果代码如下:

上传

layui.use('upload', function(){

var upload = layui.upload;

//执行实例

var uploadInst = upload.render({

elem: '#dr_shangchuan_btn' //绑定元素

,url: '/index.php?s=api&c=file&token={dr_get_csrf_token()}&siteid={SITE_ID}&m=upload&fid=6' //上传接口

,accept : 'file' // 所有文件

,auto : true // 所有文件

,field : 'file_data' // 所有文件

,exts: 'jpg|png|gif|zip|rar|7z' //即代表只允许上传压缩格式的文件

,done: function(res){

//上传完毕回调

if (res.code > 0) {

$("#dr_shangchuan").val(res.id);

alert('上传成功:'+res.info.url);

} else {

alert('上传失败:'+res.msg);

}

console.log(res);

}

,error: function(){

//请求异常回调

alert('请求失败');

}

});

});

来分析上面的代码

1、加载layui组件js代码

c68259693dfc2a561bd12d0783c92311.png

2、定义上传按钮的变量名称,改为字段名称

14c5ac8c6cc331a48cd3a04fb62a1b01.png

3、定义js上传函数的变量名称,改为字段名称

187813e0a690dd5bb009cd71264a1947.png

4、设置上传的字段id号,这个6改成图一的id号

30e2938865cfad3b99b3d60f10a12fe8.png

5、设置扩展名

f06bfa4aff373f9c6cb6e1f7ca727213.png

6、设置好了,就可以上传文件了

c71f872da0f4910c1e8c40dcf1f7f94a.png

7、改变上传成功的提示信息

7bdf569be893141ba99f8364ba8f1f42.png

这里是上传后的提示信息,为了方便,demo是alert弹窗,你可以随便用js函数替换

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值