springboot 项目中 bootstrap-fileinput 的使用 单文件/多文件 异步/同步 上传

 

参考文档 http://www.bootstrap-fileinput.com/examples.html

                https://www.jb51.net/article/158220.htm

 

首先，这个控件支持单文件和多文件上传。

 

多文件又分为同步和异步上传：

同步：所有文件一起上传，即 后端上传方法被调用一次，用集合数组方式接收文件集合。

异步：每个文件单独上传，即 后端上传方法会被多次调用，调用次数同文件个数。

 

单文件上传同上，这个同步异步就没啥区别了。

 

---------------------------------

 

方法一、多文件异步上传(控件默认uploadAsync:ture 异步提交，只要注意，会返回多次调用的结果)：

<link href="/ajax/libs/bootstrap-fileinput/fileinput.min.css" rel="stylesheet"/>


<div class="file-loading " >
    <input id="fileinputId" name="file" type="file" multiple accept="image/*">
</div>


<!-- jquery  bootstrap相关必要js文件 略-->
<script src="/ajax/libs/bootstrap-fileinput/fileinput.min.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
	$("#fileinputId").fileinput({
		'theme': 'explorer-fas',
		'uploadUrl': "file/uploadToServer",//后端文件上传URL，文件参数使用html中的input，对应name为file
		uploadExtraData: {'type':'EXPRESS','fileType':'pic'},//后端文件上传URL相关参数(不包含附件)
		overwriteInitial: false,
		// uploadAsync:false, //默认true 异步提交
		initialPreviewAsData: true,
		initialPreview: [
			// "http://demo.ruoyi.vip/img/profile.jpg",
			// "http://demo.ruoyi.vip/img/profile.jpg",
		]
	}).on('fileuploaded', function(event, jsonData, previewId, index) {
		alert("异步上传成功");
	}).on('fileerror', function(event, jsonData, previewId, index) {
		alert("异步上传失败");
	}).on('filebatchuploadsuccess', function(event, jsonData, previewId, index) {
		alert("同步上传成功");
	}).on('filebatchuploaderror', function(event, data, msg) {
		alert("同步上传失败");
	}).on("filepredelete",function (event,key) {
		return !confirm("确定删除？");
	});
});
</script>

这里附件控件name值用的是file，下面后端controller里对应的参数同名(这个方法会被调用多次，单文件方式接收文件)：

/**
 * 通用上传请求 上传到服务器
 */
@PostMapping("/file/uploadToServer")
@ResponseBody
public AjaxResult uploadToServer(MultipartFile file,String type,String fileType) throws Exception
{
    System.out.println("我被翻牌啦~~");
    System.out.println(file.getSize());
    System.out.println(file.getContentType());
    if(file == null){
        AjaxResult ajax = AjaxResult.error();
        ajax.put("code", 500);
        ajax.put("data", "null");
        return ajax;
    }
    try
    {
        FileUploadTypeEnum typeEnum = FileUploadTypeEnum.getByKey(type);//枚举获取文所在件夹
        String typePath = typeEnum.getValue() + "/";//文件夹分类
        // 上传文件路径
        String filePath = commonConfig.getUploadPath();
        boolean newName = true;
        String fileName = "";
        // 上传并返回新文件名称
        if(fileType.equals("excel")){
            fileName = FileUploadUtils.uploadExcel(filePath + typePath, file,newName);
        }else if(fileType.equals("pic")){
            fileName = FileUploadUtils.uploadPicture(filePath + typePath, file,newName);
        }

        String serverUrl = serverConfig.getUrl();//默认文件使用当前项目URL
        String localFileUrl = serverUrl + UPLOAD_PATH + typePath + fileName;

        AjaxResult ajax = AjaxResult.success();
        ajax.put("localUrl", "/" + typePath + fileName);//相对路径
        ajax.put("url", localFileUrl);//下载路径
        return ajax;
    }
    catch (Exception e)
    {
        return AjaxResult.error(e.getMessage());
    }
}

 

---------------------------------

方法二、多文件同步上传(uploadAsync:false 开启同步提交，这里注意，只返回1次调用结果，所以上传的文件返回值要拼接返回)：

<link href="/ajax/libs/bootstrap-fileinput/fileinput.min.css" rel="stylesheet"/>


<div class="file-loading " >
	<input id="fileinputId" name="files" type="file" multiple accept="image/*">
</div>

<!-- jquery  bootstrap相关必要js文件 略-->

<script src="/ajax/libs/bootstrap-fileinput/fileinput.min.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $("#fileinputId").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': "file/uploadFilesToServer",//后端文件上传URL，文件参数使用html中的input，对应name为files
            uploadExtraData: {'type':'EXPRESS','fileType':'pic'},//后端文件上传URL相关参数(不包含附件)
            layoutTemplates :{
                actionUpload:'',//去除上传预览缩略图中的上传图片
            },
            overwriteInitial: false,
            uploadAsync:false,//非异步提交  所有文件同步上传(后端用数组接收)
            initialPreviewAsData: true,
            initialPreview: [
                // "http://demo.ruoyi.vip/img/profile.jpg",
                // "http://demo.ruoyi.vip/img/profile.jpg",
            ]
        }).on('fileuploaded', function(event, jsonData, previewId, index) {
            alert("异步上传成功");
        }).on('fileerror', function(event, jsonData, previewId, index) {
            alert("异步上传失败");
        }).on('filebatchuploadsuccess', function(event, jsonData, previewId, index) {
            alert("同步上传成功");
        }).on('filebatchuploaderror', function(event, data, msg) {
            alert("同步上传失败");
        }).on("filepredelete",function (event,key) {
            return !confirm("确定删除？");
        });
    });
</script>

这里附件控件name值用的是files，下面后端controller里对应的参数同名(这个方法会被调用1次，多文件方式接收文件)：

/**
 * 通用上传请求 批量上传到服务器   数组方式接收文件
 */
@PostMapping("/file/uploadFilesToServer")
@ResponseBody
public AjaxResult uploadFilesToServer(MultipartFile[] files,String type,String fileType) throws Exception
{
    System.out.println("我们被翻牌啦~~");
    System.out.println(files.length);
    System.out.println(type);
    System.out.println(fileType);
    String filesNameList = "";
    try
    {
        FileUploadTypeEnum typeEnum = FileUploadTypeEnum.getByKey(type);//枚举获取文所在件夹
        String typePath = typeEnum.getValue() + "/";//文件夹分类
        // 上传文件路径
        String filePath = commonConfig.getUploadPath();
        boolean newName = true;
        String fileName = "";
        // 上传并返回新文件名称
        if(fileType.equals("excel")){
//                fileName = FileUploadUtils.uploadExcel(filePath + typePath, file,newName);
        }else if(fileType.equals("pic")){

            for (int i = 0; i < files.length; i++) {
                fileName = FileUploadUtils.uploadPicture(filePath + typePath, files[i],newName);
                System.out.println(fileName);
                filesNameList = filesNameList + "|" + fileName;//自行拼接
            }
        }

        String serverUrl = serverConfig.getUrl();//默认文件使用当前项目URL
        String localFileUrl = serverUrl + UPLOAD_PATH + typePath + fileName;

        AjaxResult ajax = AjaxResult.success();
        System.out.println(filesNameList);
        ajax.put("filesNameList", filesNameList);//文件拼接
        ajax.put("url", localFileUrl);//下载路径
        return ajax;
    }
    catch (Exception e)
    {
        return AjaxResult.error(e.getMessage());
    }
}