Layui文件上傳詳解：實現文件上傳功能的方法及技巧

一、Layui文件上傳組件介紹

Layui是一款基於jQuery的UI框架，提供了豐富的UI組件，其中包括文件上傳組件。Layui文件上傳組件支持文件類型限制、文件大小限制、上傳進度顯示、文件上傳前和上傳後回調等功能，方便實現文件上傳功能。

二、使用Layui文件上傳組件實現文件上傳

使用Layui文件上傳組件非常簡單，只需要引入Layui的相關文件即可。下面是實現文件上傳的基本代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui文件上傳示例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.min.js"></script>
</head>
<body>
    <input type="file" name="file">
    <script>
        layui.use('upload', function(){
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: 'input[name="file"]',
                url: '/upload/',
                done: function(res){
                    console.log(res);
                },
                error: function(){
                    //請求異常回調
                }
            });
        });
    </script>
</body>
</html>

以上代碼實現了簡單的文件上傳功能，但是只能上傳單個文件，並沒有加入文件類型限制和文件大小限制等功能。

三、Layui文件上傳組件高級用法

1. 實現多文件上傳

實現多文件上傳只需要設置配置項中的multiple為true即可，示例代碼如下：

var uploadInst = upload.render({
    elem: 'input[name="file"]',
    url: '/upload/',
    multiple: true,
    done: function(res){
        console.log(res);
    },
    error: function(){
        //請求異常回調
    }
});

2. 文件類型限制

使用accept參數可以設置上傳文件的類型限制，多個文件類型可以用逗號分隔，如下示例所示：

var uploadInst = upload.render({
    elem: 'input[name="file"]',
    url: '/upload/',
    accept: 'fileType1, fileType2',
    done: function(res){
        console.log(res);
    },
    error: function(){
        //請求異常回調
    }
});

3. 文件大小限制

使用size參數可以設置上傳文件的大小限制，單位為KB，示例代碼如下：

var uploadInst = upload.render({
    elem: 'input[name="file"]',
    url: '/upload/',
    size: 1024,
    done: function(res){
        console.log(res);
    },
    error: function(){
        //請求異常回調
    }
});

4. 上傳進度顯示

使用progress參數可以設置上傳進度的顯示，示例代碼如下：

var uploadInst = upload.render({
    elem: 'input[name="file"]',
    url: '/upload/',
    progress: function(n, elem){
        //n為上傳進度（0-100），elem為容器元素
        elem.find('.layui-progress-bar').css('width', n + '%');
    },
    done: function(res){
        console.log(res);
    },
    error: function(){
        //請求異常回調
    }
});

5. 文件上傳前回調函數

使用before函數可以在上傳文件之前進行一些處理，如下所示：

var uploadInst = upload.render({
    elem: 'input[name="file"]',
    url: '/upload/',
    before: function(obj){
        //預讀本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
            $('#preview').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
        });
    },
    done: function(res){
        console.log(res);
    },
    error: function(){
        //請求異常回調
    }
});

6. 文件上傳後回調函數

使用done函數可以在上傳文件成功之後進行一些處理，示例代碼如下：

var uploadInst = upload.render({
    elem: 'input[name="file"]',
    url: '/upload/',
    done: function(res){
        console.log(res);
    },
    error: function(){
        //請求異常回調
    }
});

四、總結

以上就是Layui文件上傳組件的詳細介紹和應用，通過使用Layui文件上傳組件可以方便地實現文件上傳功能，並且支持文件類型限制、文件大小限制、上傳進度顯示、文件上傳前和上傳後回調等功能，相信對開發者們會有所幫助。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/271926.html