文件上传控件bootstrap-fileinput的使用，附带后台上传、下载接口源码。

一、下载插件：

        提取地址：点我获取，提取码：sp66   压缩包解压后文件夹内容如下：

js：插件核心js代码，引用fileinput.min.js/fileinput.js即可，默认插件语言为英文，如需要中文需要引用js/locales/zh.js(其他语言引用相应的js文件)

css：插件核心css代码，fileinput.min.css/fileinput.css（核心css代码，引用任何一个）、fileinput-rtl.min.css/fileinput-rtl.css(选用这组css，文件选择框会和从右向左排列，即选择文件等相关按钮按钮在左边，文件框在右边)

themes:主题，如需要插件主题样式可引用主题文件夹下的相应js和css文件

 

二、引入相关js、css

         <script src="/static/js/fileinput.min.js"></script>

         <script src="/static/js/fileinput.js"></script>

         <link rel="stylesheet" href="/static/css/fileinput.min.css">

        中文需要引用js/locales/zh.js

　　需要主题样式时引用themes下相关文件夹中的js和css

　　tips：最好以上按顺序引用，免得出现莫名其妙的问题，比如zh.js必须在fileinput.js后引用否则无效

三、代码示例：

HTML:

<div class="form-group">
            <label class="col-sm-3 control-label">使用指南路径：</label>
            <div class="col-sm-8">
                <input id="guideUrl" class="file" type="file" name="file" multiple data-show-upload="true">
                <input id="guideUrls" type="text" name="guideUrl" style="display:none">
            </div>
        </div>

$("#guideUrl").fileinput({
        language: 'zh', //设置语言
        uploadUrl: ctx + 'common/upload', //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png','pdf','doc','docx','pptx'],//接收的文件后缀
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式    
        dropZoneEnabled: true,//是否显示拖拽区域
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

    }).on("fileuploaded", function (event, data, previewId, index) {
        var result = data.response.path;
        $("#guideUrls").val(result);
    }).on('filesuccessremove', function (event, previewId, extra) {
        //在移除事件里取出所需数据，并执行相应的删除指令
        delete(($('#' + previewId).attr('fileid')));
    });

 

Java：上传

@PostMapping("/common/upload")
    @ResponseBody
    public Map<String, Object> uploadFile(HttpServletRequest request, HttpServletResponse response) {
        Map<String, Object> result = new HashMap<String, Object>();
        // 转型为MultipartHttpRequest：
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        // 获得文件：
        MultipartFile file = multipartRequest.getFile("file");
        try  {
            if (!(file.getOriginalFilename() == null || "".equals(file.getOriginalFilename()))) {
                //获取你要上传的系统盘符
                String filePath = Global.getUploadPath();
                File tempFile = new File(filePath);
                if (!tempFile.exists())
                {
                    tempFile.mkdirs();
                }
                // 对文件进行存储处理
                byte[] bytes = file.getBytes();
                Path path = Paths.get(filePath, "\\" + file.getOriginalFilename());
                Files.write(path, bytes);
                result.put("path",filePath+"/"+file.getOriginalFilename());
                result.put("msg", "上传成功！");
                result.put("result", true);
            }
        } catch (IOException e) {
            result.put("msg", "上传失败，错误异常");
            result.put("result", false);
            e.printStackTrace();
        } catch (Exception e1) {
            e1.printStackTrace();
        }
        return result;
    }

上传成功后保存这个新增界面，生成一条数据到数据库中。如下图所示：

 

Java：下载：传入guide_url字段

//文件下载
    @GetMapping("common/download/local")
    public void downloadLocal(HttpServletRequest request, HttpServletResponse response) {
        File file = new File(request.getParameter("path"));
        String fileName = file.getName();
        String ext = fileName.substring(fileName.lastIndexOf(".") + 1);
        String agent = (String) request.getHeader("USER-AGENT"); //判断浏览器类型
        try {
            if (agent != null && agent.indexOf("Fireforx") != -1) {
                fileName = new String(fileName.getBytes("UTF-8"), "iso-8859-1");   //UTF-8编码，防止输出文件名乱码
            } else {
                fileName = URLEncoder.encode(fileName, "UTF-8");
            }
            BufferedInputStream bis = null;
            OutputStream os = null;
            response.reset();
            response.setCharacterEncoding("utf-8");
            if (ext == "docx") {
                response.setContentType("application/msword"); // word格式
            } else if (ext == "pdf") {
                response.setContentType("application/pdf"); // pdf格式
            }
            response.setHeader("Content-Disposition", "attachment; filename=" + fileName);
            try {
                bis = new BufferedInputStream(new FileInputStream(file));
                byte[] b = new byte[bis.available() + 1000];
                int i = 0;
                os = response.getOutputStream();   //直接下载导出
                while ((i = bis.read(b)) != -1) {
                    os.write(b, 0, i);
                }
                os.flush();
                os.close();
            } catch (IOException e) {
                e.printStackTrace();
            } finally {
                if (os != null) {
                    try {
                        os.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
    }