layui上傳文件詳解

一、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);
    }
});