LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）

迷南。 2023-10-05 15:29 89阅读 0赞

#### 1 手动上传 ####

上传文件分为两步，第一步选择文件，第二步上传文件。

HTML代码：

JS代码：

$(function(){
        initUpload();
    });
    //初始化上传组件
    function initUpload(){
        layui.use(['upload'], function () {
            var upload = layui.upload;
            //单文件上传
            upload.render({
                elem: '#selectFile',
                url: "upload.aspx",
                accept: 'file',
                multiple: false,
                auto: false,
                size: 50 * 1024,//单位kb
                bindAction: '#uploadFile',
                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("上传失败！");
                }
            });
        });
    }

#### 2 自动上传 ####

选择文件时自动上传文件。

HTML代码：

JS代码：

$(function(){
        initUpload();
    });
    //初始化上传组件
    function initUpload(){
        layui.use(['upload'], function () {
            var upload = layui.upload;
            //单文件上传
            upload.render({
                elem: '#selectFile',
                url: "upload.aspx",
                accept: 'file',
                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("上传失败！");
                }
            });
        });
    }