单文件上传和多文件上传

若依项目下jasny-bootstrap-js插件

引入css

<th:block th:include=“include :: jasny-bootstrap-css”/>

引入js

<th:block th:include=“include :: jasny-bootstrap-js”/>

单文件上传

html部分

<div class="form-group">
    <label class="col-sm-2 control-label">附件上传：</label>
    <div class="col-sm-10">
        <div class="fileinput fileinput-new input-group" data-provides="fileinput" data-url="/common/upload">
            <div class="form-control" data-trigger="fileinput" style="line-height: 15px;"> <!--让图标文字居中-->
            	<i class="glyphicon glyphicon-file fileinput-exists"></i> 
            	<span class="fileinput-filename"></span> <!--文件名显示-->
            </div>
            <span class="input-group-addon btn btn-white btn-file">
            <span class="fileinput-new">选择文件</span>
            <span class="fileinput-exists">更改</span>
            <input type="file" accept=".pdf,.xlsx,.xls,.doc,.docx"
                   onchange="validateFile(this)">
            </span>
            <a href="javascript:;" class="input-group-addon btn btn-white fileinput-exists"
               data-dismiss="fileinput">清除</a>
        </div>
        <p style="margin-top: 15px;">
            <small class="form-text text-muted" style="font-size: 14px;">只能上传PDF、Excel和Word文件，单个文件不超过5MB。</small>
        </p>
    </div>
</div>

js部分

function validateFile(input) {
    var file = input.files[0];
    var maxSize = 5 * 1024 * 1024; // 5MB
    var formData = new FormData();

    var fileSize = file.size;
    formData.append('file', file); // 将文件添加到 FormData 对象中

    if (fileSize > maxSize) {
        alert('文件 "' + file.name + '" 大小超过限制，单个文件不超过5MB。');
        input.value = ''; // 清空文件输入框中的内容
        return false;
    }

    var allowedExtensions = /(\.pdf|\.xls|\.xlsx|\.doc|\.docx)$/i; // 只允许PDF、Excel和Word文件
    if (!allowedExtensions.exec(file.name)) {
        alert('文件 "' + file.name + '" 类型不支持，只能上传PDF、Excel和Word文件。');
        input.value = ''; // 清空文件输入框中的内容
        return false;
    }

    $.ajax({
        url: '/common/upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
             if (response.code === 0){
                 $('input[name="filePath"]').val(response.fileName);
             }
        },
        error: function(xhr, status, error) {
            console.error('Error uploading file:', error);
        }
    });

    return true;
}

多文件上传

html部分

<div class="form-group">
    <label class="col-sm-2 control-label">附件上传：</label>
    <div class="col-sm-10">
        <div class="fileinput fileinput-new input-group" data-provides="fileinput">
            <div class="form-control" data-trigger="fileinput" style="line-height: 15px;"> <!--让图标文字居中-->
            	<i class="glyphicon glyphicon-file fileinput-exists"></i> 
            	<span class="fileinput-filename"></span> <!--文件名显示-->
            </div>
            <span class="input-group-addon btn btn-white btn-file">
            <span class="fileinput-new">选择文件</span>
            <span class="fileinput-exists">更改</span>
            <input type="file" accept=".pdf,.xlsx,.xls,.doc,.docx" multiple
                   onchange="validateFiles(this)">
            </span>
            <input type="hidden" name="filePath">
            <a href="javascript:;" class="input-group-addon btn btn-white fileinput-exists"
               data-dismiss="fileinput">清除</a>
        </div>
        <p style="margin-top: 15px;">
            <small class="form-text text-muted" style="font-size: 14px;">只能上传PDF、Excel和Word文件，单个文件不超过5MB。</small>
        </p>
    </div>
</div>

js部分

function validateFiles(input) {
        var files = input.files;
        var maxSize = 5 * 1024 * 1024; // 5MB
        var formData = new FormData();

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var fileSize = file.size;
            formData.append('files', files[i]); // 将每个文件添加到 FormData 对象中

            if (fileSize > maxSize) {
                alert('文件 "' + file.name + '" 大小超过限制，单个文件不超过5MB。');
                input.value = ''; // 清空文件输入框中的内容
                return false;
            }

            var allowedExtensions = /(\.pdf|\.xls|\.xlsx|\.doc|\.docx)$/i; // 只允许PDF、Excel和Word文件
            if (!allowedExtensions.exec(file.name)) {
                alert('文件 "' + file.name + '" 类型不支持，只能上传PDF、Excel和Word文件。');
                input.value = ''; // 清空文件输入框中的内容
                return false;
            }
        }

        $.ajax({
            url: '/common/uploads',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                 if (response.code === 0){
                     $('input[name="filePath"]').val(response.fileNames);
                 }
            },
            error: function(xhr, status, error) {
                console.error('Error uploading files:', error);
            }
        });

        return true;
    }