bootstrap文件上传fileupload插件

最新推荐文章于 2021-05-07 11:26:52 发布

djaaa123456

最新推荐文章于 2021-05-07 11:26:52 发布

阅读量832

点赞数

文章标签： json javascript java ViewUI

原文链接：http://www.cnblogs.com/ysq2018China/p/10208538.html

版权

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

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

bootstrap fileupload 使用详解：https://blog.csdn.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>