SSM框架 基于Bootstrap fileinput 实现文件上传功能

SSM框架 基于Bootstrap fileinput 实现文件上传功能

pom.xml文件的配置

想要实现SSM框架实现多文件上传，必要的jar包必须要在pom.xml文件中引入。如下：

        
        
            commons-fileupload
            commons-fileupload
            1.3.1
        
        
        
            commons-io
            commons-io
            2.4
        
        

准备一个html页面

需要准备css和js文件，这个不用多说吧。据说这些引入的顺序很重要，我照着官方给的example一个个输进去。照着我的例子自己修改即可。缺少什么插件就自己去下载，这里不再赘述。

我们需要给这个上传控件准备一个div和input标签，如下。

再加上js代码，我们可以在这里配置我们的控件和上传的url等属性。

上面我没有写太详细，比如成功时候的回调函数和失败的回调函数。

Java后台的写法。

Bootstrap fileinput对于后台方法的返回值要求不那么严格，只要求返回的内容中，如果上传成功，不要返回有内容的“error”属性即可，那么我们就使用@ResponseBody这个注解，来返回一个map即可，后期我们可以在js文件中，对这个返回的json字符串进行一些动作。这里我就不再详细的去写。

    @RequestMapping(value = "/uploadDocs",produces="application/json;charset=utf-8")
    @ResponseBody
    public Map uploadDocs(@RequestParam("file") MultipartFile file){
        Map uploadData = new HashMap();
        String uploadDocsPath = "/Users/apple/IdeaProjects/ssmcreater/src/main/webapp/documents/";
        String fileName = file.getOriginalFilename();
        File dir = new File(uploadDocsPath,fileName);
        if(!dir.exists()){
            dir.mkdirs();
        }
        try {
            file.transferTo(dir);
            uploadData.put("code", 0);
            uploadData.put("msg", "上传成功");
            uploadData.put("data", "");
        } catch (IOException e) {
            uploadData.put("code", -1);
            uploadData.put("msg", "上传失败");
            uploadData.put("data", "");
            uploadData.put("error", "上传失败，请检查网络连接或联系管理员");
        }
        return uploadData;
    }

如上。我们就完成了对Bootstrap fileinput与ssm框架的结合，试验之后我们可以看到，后台已经接受到了前台上传的文件。前台也完美的显示了上传已经完成。