附件上传插件fileinput+SpringMVC后台代码实现

1.JS，CSS引用

<link rel="stylesheet" href="/bower_components/bootstrap-fileinput/css/fileinput.css" type="text/css">
<script src="/bower_components/bootstrap-fileinput/js/fileinput.js"></script>
<script src="/bower_components/bootstrap-fileinput/js/locales/zh.js"></script><!--汉化JS-->

2.HTML

<input id="file-pic" name="file" type="file" >

3.JS代码（属性可以自行百度）

//初始化附件上传控件
    p._fileInputOnLoad = function(id){
        $('#'+id).fileinput({//初始化上传文件框
            multiple:false,
            language : 'zh',
            uploadUrl: "/files/upload?_csrf="+p.csrf,
            autoReplace : true,
            showUpload: false, //是否显示上传按钮
            maxFileCount : 1,
            showPreview : false,
            showRemove : false,
            allowedFileExtensions : [ "jpg", "png", "gif"],
            browseClass : "btn btn-primary", //按钮样式
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
        });
    }

    //附件上传控件绑定事件
    p._fileInputMatch = function(id){
        $('#'+id).on('filebatchselected', function (event, data, id, index) {
            $(this).fileinput("upload");
        });
        $('#'+id).on("fileuploaded", function(e, data,preview) {
            var res = data.response;
            $("#imageUrl").val(res.url);
            $(".img-circle").attr('src',res.url);
        });
    }

4.后台java代码

import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.charset.Charset;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author Mr.Yuan on 2018/02/02.
 */
@Controller
@RequestMapping("/files")
public class FileOperationController {

    @PostMapping("/upload")
    @ResponseBody
    public Map<String, Object> upload(MultipartHttpServletRequest request) throws IOException {
        Map<String, Object> json = new HashMap<String, Object>();
        MultiValueMap<String,MultipartFile> map = request.getMultiFileMap();
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(new MediaType("text", "plain",  Charset.forName("UTF-8")));
        List<MultipartFile> list = map.get("file");// 获取到文件的列表
        String path= "C:/upload"; //文件上传路径信息
        for (MultipartFile mFile : list) {
            String originalFileName= mFile.getOriginalFilename();//获取文件名称
            String UUID = java.util.UUID.randomUUID().toString();
            byte[] bytes = mFile.getBytes();//获取字节数组
            String fileBname = UUID+"."+mFile.getOriginalFilename().substring(mFile.getOriginalFilename().lastIndexOf(".")+1);
            String filePath= path+ File.separator+ fileBname;
            FileOutputStream fos= new FileOutputStream(new File(filePath)); //写出到文件
            fos.write(bytes);
            fos.flush();
            fos.close();
            json.put("url", filePath);
        }
        return json;
    }
}