bootstrap文件上传fileupload插件

Bootstrap FileInput中文API整理：https://blog.****.net/u012526194/article/details/69937741

SpringMVC + bootstrap fileupload 多文件上传：https://blog.****.net/fanxiangru999/article/details/61927385

bootstrap fileupload 使用详解：https://blog.****.net/fanxiangru999/article/details/63756730

源码以及API地址：

bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在线API：http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo

前后端单文件上传代码：

    @ResponseBody

    @RequestMapping(value="/upload", method = RequestMethod.POST)

    public JSONObject upload(@RequestParam("file") MultipartFile file, HttpServletRequest request ) {

        System.out.println("上传开始");

        JSONObject json = new JSONObject();

        json.put("code", "1");

        if( file.isEmpty() ) {

            json.put("msg", "上传文件为空");

            return json;

        }else {

            String savePath = request.getServletContext().getRealPath("/upload/");

            String fileName=file.getOriginalFilename();

            String pathname = savePath + fileName;

            File dest = new File(pathname);

            if( !dest.getParentFile().exists() ) {

                dest.getParentFile().mkdirs();

            }

            try {

                file.transferTo(dest);

                json.put("code", 1);

                json.put("msg", "上传成功");

                json.put("imgPath", pathname);

                return json;

            } catch (Exception e) {

                json.put("msg", e.getMessage());

                return json;

            }

        }

    }

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE html>

<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->

<html lang="en">

    <head>

        <meta charset="UTF-8"/>

        <title>上传文件测试</title>

        <link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">

        <link href="<%=basePath%>css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

        <script src="<%=basePath%>js/jquery-3.2.1.min.js"></script>

        <script src="<%=basePath%>js/fileinput.min.js" type="text/javascript"></script>

        <script src="<%=basePath%>js/fileinput_locale_zh.js" type="text/javascript"></script>

        <script src="<%=basePath%>js/bootstrap.min.js" type="text/javascript"></script>

    </head>

    <body>

        <div class="container">

            <div class="row" style="height: 500px">

                <input id="file-0" class="file" type="file" multiple data-min-file-count="1" name="file">

            </div>

        </div>

        <script type="text/javascript">

            //初始化fileinput控件（第一次初始化）

            function initFileInput(ctrlName, uploadUrl) {

                var control = $('#' + ctrlName);

                control.fileinput({

                    language: 'zh', //设置语言

                    uploadUrl: uploadUrl, //上传的地址

                    allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀

                    showUpload: true, //是否显示上传按钮

                    showCaption: false,//是否显示标题

                    browseClass: "btn btn-primary", //按钮样式

                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

                });

            }

            //初始化fileinput控件（第一次初始化）

            initFileInput("file-0", "/upload");

        </script>

    </body>

</html>

秒客网

bootstrap文件上传fileupload插件

相关文章