【bootstrap】bootstrap上传文件组件

引入相关bootstrap文件链接

<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/authorization/css/style.css">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/css/fileinput.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/css/fileinput-rtl.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/themes/explorer-fa/theme.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/plugins/sortable.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.7/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/locales/fr.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/locales/es.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/themes/explorer-fa/theme.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/themes/fa/theme.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/locales/zh.min.js"></script>

编写前台代码

<html>
<#include "../common/header.ftl">

<body>
<div id="wrapper" class="toggled">
<#include  "../common/nav.ftl">
    <#--上传文件区域-->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <form role="form" enctype="multipart/form-data" method="POST" action="/authorization/wxCard/uploadImages">
                        <div class="container">
                            <label>图片上传</label>
                            <div class="file-loading">
                                <input id="file-fr" name="file" type="file" multiple>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $('#file-fr').fileinput({
        theme: 'fa',
        language: 'zh',
        uploadAsync: true,//异步上传
        uploadUrl: '/authorization/wxCard/uploadImages',
        allowedFileExtensions: ['jpg', 'png', 'gif','mp4'],
        maxFileSize:0,
        maxFileCount:10
    }).on("fileuploaded", function(event,data) { //异步上传成功结果处理
        console.log(data.response.src);
        alert("上传成功");
        $("#userImage").val(data.response.src);
    })
</script>
</html>

后台接收图片，并存入本地

@PostMapping("/uploadImages")
@ResponseBody
public String uploadImages(HttpServletRequest request,MultipartFile file){
    try{
        String filename = file.getOriginalFilename();
        //上传的路径
        String path = "d:\\upload";
        filename = changeName(filename);
        String rappendix = "upload/" + filename;
        filename = path + "\\" + filename;
        File file1 = new File(filename);
        file.transferTo(file1);
        String str = "{\"src\":\"" + rappendix + "\"}";
        return str;
    }catch (Exception e){
        throw new AuthorizationException("上传文件失败");
    }
}

效果如下:

选中两个文件

扫描二维码关注公众号，回复： 3005742 查看本文章

【bootstrap】bootstrap上传文件组件

猜你喜欢