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

  • springboot集成bootstrap fileinput实现单个文件上传已关闭评论
  • 1,029 views
  • A+
所属分类:编程开发

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;
}

运行显示,如下:

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

点击图像选择上传文件,如下:

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

 

点击上传,如下:

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

 

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

 

  • 安卓客户端下载
  • 微信扫一扫
  • weinxin
  • 微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar