Question

bootstrap-fileinput有没有完整的前后台例子

Answer 1

参考文档:http://plugins.krajee.com/file-input

html代码

<input id="myfile" class="form-control input-sm" type="file" multiple name="file">

js代码

var myfile = initFileimages('#myfile')
//如果需要自定义按钮上传可以调用myfile.fileinput("upload"),可参考文档列举的方法
function initFileimages(id) {
    var fileinput = $(id).fileinput({
        language : 'zh',
        uploadUrl : ctx + '/setting/file/fileupload.do',//上传的地址
        enctype : 'multipart/form-data',
        maxFileSize : 51200,// 单位kb
        maxFileCount : 1,
        showPreview : false,
        autoReplace : true
    }).on("fileuploaded", function(event, data, previewId, index) {
        //上传成功事件
        var result = data.response;//获取接口返回的json，自己定义
        console.log(result)
    }).on("filebatchselected", function(event, files) {
        //选择文件后的事件
    }).on("fileuploaderror", function(event, data, msg) {
        //上传错误事件
    });
    //其他参数和时间不列举了，可以查文档
    return fileinput;
};

到这一步了后台代码网上一大堆了，我这边列举个java springmvc的简单写法

Controller层

    @RequestMapping(value = "/fileupload", method = { RequestMethod.GET, RequestMethod.POST })
    public @ResponseBody Map<String, Object> fileUpload(@RequestParam(value = "file", required = true) MultipartFile file) {
        return fileService.addFile(file);
    }

Service层

    public Map<String, Object> addFile(MultipartFile file) {
        Map<String, Object> result = new HashMap<String, Object>();
        try {
            if (FileUtils.saveFile(file.getInputStream(), file.getOriginalFilename())) {
                result.put("code", 1);
                result.put("code", "上传成功");
            } else {
                result.put("code", 0);
                result.put("code", "上传失败");
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return result;
    }

有了流和文件名了，剩下的就可以随意玩了，saveFile方法请自由发挥