springboot集成bootstrap fileinput实现单个文件上传

fileinput给了个maxFileCount参数来限制上传文件数目，但是仍然多图片可以分批量上传，我这里只需要上传一个，所以就修改了一下，如下：

依赖静态资源

• jquery
• bootstrap的js和css文件
• fileinput.js和css
• 中文需要 zh.js
• 主题选配themes下js和css

html内容

<div class="form-group">
    <label class="col-sm-3 control-label">封面：</label>
    <div class="col-sm-8">
        <div class="kv-avatar">
            <div class="file-loading">
                <input id="bookimg" name="file" type="file" multiple>
            </div>
        </div>
        <div id="kv-avatar-errors" class="center-block" style="width:800px;display:none"></div>
    </div>
</div>

js内容

$("#bookimg").fileinput({
    'uploadUrl': '/common/upload',
    overwriteInitial: false,
    maxFileSize: 1500,
    showClose: false,
    showCaption: false,
    showBrowse: false,
    initialPreviewAsData: true,
    browseOnZoneClick: true,
            initialPreview: [
                //"/img/profile.jpg"
            ],
    removeLabel: '删除',
    removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
    removeTitle: 'Cancel or reset changes',
    elErrorContainer: '#kv-avatar-errors',
    msgErrorClass: 'alert alert-block alert-danger',
    defaultPreviewContent: '<img src="/img/default-avatar-male.png" alt="springboot集成bootstrap fileinput实现单个文件上传" alt="Your Avatar"><h6 class="text-muted">Click to select</h6>',
    layoutTemplates: {main2: '{preview} ' + ' {remove} {browse}  {upload}'},
    allowedFileExtensions : ['jpg', 'png','bmp','jpeg']
});

$("#bookimg").on("fileuploaded", function (event, data, previewId, index) {
            if(data.response.code == 0){
                alert('上传成功');
            }
 });

springboot

Controller层

@PostMapping("/common/upload")
@ResponseBody
public BtResult uploadFile(MultipartFile file) throws Exception
{
    try
    {
        // 上传文件路径
        String filePath = Global.getUploadPath();
        // 上传并返回新文件名称
        String fileName = FileUploadUtils.upload(filePath, file);
        String url = serverConfig.getUrl() + fileName;
        BtResult btResult= BtResult.success();
        btResult.put("fileName", fileName);
        btResult.put("url", url);
        return btResult;
    }
    catch (Exception e)
    {
        return BtResult .error(e.getMessage());
    }
}

service层

public static final String upload(String baseDir, MultipartFile file, String[] allowedExtension)
        throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException,
        InvalidExtensionException
{
    int fileNamelength = file.getOriginalFilename().length();
    if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH)
    {
        throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);
    }

    assertAllowed(file, allowedExtension);

    String fileName = extractFilename(file);

    File desc = getAbsoluteFile(baseDir, fileName);
    file.transferTo(desc);
    String pathFileName = getPathFileName(baseDir, fileName);
    return pathFileName;
}

运行显示，如下：

点击图像选择上传文件，如下：

点击上传，如下：

好了，上传完后，就不能再上传了