layui uploader用法

最新推荐文章于 2025-06-13 11:57:16 发布

wuxing164

最新推荐文章于 2025-06-13 11:57:16 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： layer

本文链接：https://blog.youkuaiyun.com/wuxing164/article/details/96482507

layer 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于layui框架的文件上传组件配置方法及其实现细节。通过具体代码示例展示了如何设置上传文件的大小限制、允许的文件类型、自定义上传URL、额外参数和请求头等关键配置项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
        layui.use(['upload', 'jquery'], function () {
            var upload = layui.upload;
            var $ = layui.$;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1'                //绑定元素
                , url: '/Home/UploadImg'      //上传接口


                //*********************传输限制
                , size: 100                   //传输大小100k
                , exts: 'jpg|png|gif|'        //可传输文件的后缀
                , accept: 'file'              //video audio images


                //****************传输操作相关设置
                , data: { Parm1: "hello", Parm2: "world" }    //额外传输的参数
                , headers{token:'sasasasa'}                   //额外添加的请求头
                , auto: false                                 //自动上传,默认是打开的
                , bindAction: '#btnUpload'                    //auto为false时，点击触发上传
                , multiple: false                             //多文件上传
                //, number: 100                               //multiple:true时有效
               
                , done: function (res) {                      //传输完成的回调
                    console.log(res.IsSuccess)
                    console.log(res.Msg)
                    $('#myPic').attr("src", res.Src);
                }
                , error: function () {                         //传输失败的回调
                    //请求异常回调
                }
            });
        });
    </script>