layui上传文件详解

IANY • 2024-10-04 00:17 • 编程

一、layui上传文件大小限制

layui.upload模块提供了size属性，可以设置上传文件的大小限制（单位KB）。默认值为0，表示不限制上传文件大小。如果要限制文件大小为100KB，则需要设置size为100。

layui.upload({
    url: '/upload/file',
    size: 100,
    done: function(res){
        console.log(res);
    }
});

二、layui上传文件进度条显示百分比

上传文件时，可以在页面上显示进度条百分比以及上传进度状态。layui.upload模块提供了progress属性，可以设置上传进度回调函数。

layui.upload({
    url: '/upload/file',
    progress: function(percent){
        console.log(percent + '%'); //获取上传进度百分比
    },
    done: function(res){
        console.log(res);
    }
});

三、layui上传文件至服务器php

上传文件至服务器的php脚本代码示例：

<?php
$uploadDir = '/upload/files/';
$targetFile = $uploadDir . basename($_FILES['file']['name']);

if(move_uploaded_file($_FILES['file']['tmp_name'], $targetFile)) {
    echo json_encode(['code' => 0, 'msg' => '上传成功']);
} else {
    echo json_encode(['code' => 1, 'msg' => '上传失败']);
}
?>

四、layui上传文件并查看

上传文件并预览的代码示例：

layui.use('upload', function(){
    var upload = layui.upload;
    var demoText = $('#demoText');
    upload.render({
        elem: '#test1',
        url: '/upload/file',
        done: function(res){
            demoText.html('<span style="color: #98FB98;">上传成功：</span>' + res.msg);
            //预览文件
            $('#demo1').attr('src', res.path);
        }
    });
});

五、layui上传文件回调json格式

上传文件回调json格式的代码示例：

layui.upload({
    url: '/upload/file',
    accept: 'json',
    done: function(res){
        console.log(res);
    }
});

六、layui上传文件乱码

上传文件乱码需要设置charset属性为utf-8：

layui.upload({
    url: '/upload/file',
    charset: 'utf-8',
    done: function(res){
        console.log(res);
    }
});

七、layui上传文件参数

上传文件时，可以通过data属性设置额外的参数：

layui.upload({
    url: '/upload/file',
    data: {param1: 'value1', param2: 'value2'},
    done: function(res){
        console.log(res);
    }
});

八、layui上传文件类型有哪些

layui上传文件支持的类型有：jpg、jpeg、png、gif、bmp、flv、mp4、avi、wmv、mp3、wav、mid、rar、zip、tar、gz、7-zip、bz2、iso、pdf、doc、docx、xls、xlsx、ppt、pptx、txt、rtf、xml。

九、layui上传文件Servlet

上传文件至Servlet的代码示例：

public class UploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        try {
            String uploadDir = "/upload/files/";	//上传文件目录
            String targetFile = uploadDir + request.getParameter("fileName");
            InputStream is = request.getInputStream();
            OutputStream os = new FileOutputStream(targetFile);
            byte[] buffer = new byte[4096];
            int len;
            while((len = is.read(buffer)) != -1) {
                os.write(buffer, 0, len);
            }
            os.close();
            is.close();
            out.print("{\"code\": 0, \"msg\": \"上传成功\"}");
        } catch (Exception e) {
            out.print("{\"code\": 1, \"msg\": \"上传失败\"}");
        }
        out.close();
    }
}

十、layui上传文件类型设置选取

设置只允许上传图片和音频类型的文件：

layui.upload({
    url: '/upload/file',
    accept: 'images, audio',
    done: function(res){
        console.log(res);
    }
});

原创文章，作者：IANY，如若转载，请注明出处：https://www.506064.com/n/137653.html