bootstrap-fileinput 多文件上传 : 提交form时获取到所有当前上传的文件(特别指出，支持删除及多次提交)

bootstrap-fileinput 多文件上传，网上搜了两天了，都没有提交表单时获取控件所有在列文件的例子。好吧，可能大家都是上传时后台操作数据的，或者控件自带了某些功能，但我不知道也不会用，所以只能用笨方法自己折腾了。

 

大概说下吧，业务流程是，前端使用bootstrap-fileinput控件上传多个文件到服务器，服务器返回上传后数据(文件名或文件路径)，提交表单时收集这些上传返回数据，并同表单一起提交给后台。

上传文件有两种操作方式，一个是选中多个文件，最后一起上传；一个是每选中一个文件就上传一次，不用最后再点那个上传按钮了(省事)。两种方式都支持同步、异步提交文件。

这里为了图方便，我就直接选中文件事件之后去执行文件上传，而且是异步提交(为什么是异步提交，后边看代码就知道了)。

 

一开始直接套控件源码，上传，返回数据，一套流程下来没啥毛病，返回的数据放到一个数组里 叫它fileArray吧，最后提交表单时一起提交，没毛病。但是，批量上传文件之后，发现其中有个文件是不需要的，好，删除它，但是，删掉了之后，fileArray里那条返回的数据还在的，刚才只是删除了那个文件而已，最终提交的数据并没有改动，好，现在需求是，删除控件里的某个文件的时候，顺带着需要更新fileArray。  怎么顺带着更新fileArray？它和控件没有什么绑定的关系啊。。   好嘛，想办法。。  网上看了有个人的做法是，文件提交之后，用js在对应文件的元素下追加一个自定义的标签，用于存放返回的数据，好，我用<img>标签的src存放返回的数据，并使用hidden属性隐藏这个控件。

看上去也没毛病，只要提交表单的时候根据hidden_img收集所有的img标签src属性值就行了，棒，盘它！！

然鹅，事实证明，我还是太年轻了，万万没想到，控件自动生成的html代码，居然id会重复，会重复！！！(一开始我用的不是异步，是同步上传，所有文件选好后打包上传，发现分批次去选文件的时候，id值居然每次选择的时候都从下标0重新排序，导致会有很多重复的id值，好吧这话有点绕人，不理解也没关系，继续看)

这里，每次选文件的时候，都会自动去找第一个文件的id？返回的previewId每次都从下标0重新开始？wtf！！坑人么这不是

所以直接导致我删除文件之后，提交表单时收集到的上传数据全部错乱，除非一次性选择所有要上传的文件，一次性提交表单，但是，任何一个用户都不可能这么操作吧。

 

好，突然想到，不是id会重复么，那我修改它，每次上传完文件之后，修改掉当前文件所在div的id属性值，我自己定义一个不重复的总ok了吧，干起来！！！

事实证明，我依然太年轻，根本就不懂js，非得自作聪明去搞，然后就失败了。原想法就是简单的，上传之后修改id，好，代码

我被狠狠打击了，改不了id，不懂js的我不知为何会这样。。

 

振作起来啊！！同志！！   你不是改不了吗，那我到你源文件里改，总行了吧，去看源码  bootstrap-fileinput/fileinput.js，各种搜各种改，本来想着生成的代码块里，改掉id的值：

然后发现，各种对这个previewId的引用，完全下不了手。。

总之吧，误打误撞搜到了这里，我随便插几个字符，前端上传之后居然id可以被改掉，然后发现，不用去自定义这个id，也可以实现我想要的效果：

不管分几次选中文件，都会在对应的div下追加一个自生成的img标签：

我是一脸懵逼的，怎么就可以了？？？  给自己个安慰理由吧：可能大概也许估么着应该是 js源码里对这个id复用了？，我改了这个返回的id值，复用的时候就失效了？   也不知道会不会出什么问题，我这是真不懂js，瞎改，有没问题也不知道，凑合用吧，反正眼前看上去是没毛病的。

 

好，上面写的内容也不知道逻辑上有啥问题没，懒得回去看了，捋一下吧：

一、修改源码(虽然我也不想改，但是奈何笨人只能用这个方法了)

js和min.js，用哪个就改哪个：

fileinput.js 搜

$thumb.attr({'id': self.previewInitId +

fileinput.min.js 搜(注意，min文件是压缩文件，字符间没有空格的)

$thumb.attr({'id':self.previewInitId

 

二、前端代码

html 

<!-- 头引入bootstrap相关css-->
<!-- 头引入bootstrap-fileinput相关css-->
<form id="testForm">
<input id="imgList" name="imgList" value="" type="hidden">
<div class="file-loading " >
	<!-- 这里限制了只能上传image类型文件-->
	<input id="fileinputId" name="file" type="file" multiple accept="image/*">
</div>
</from>

<!-- 引入jquery相关js-->
<!-- 引入bootstrap相关js-->
<!-- 引入bootstrap-fileinput相关js-->

 js  (发现之前用img标签存数据，会有小问题，然后改成了用span标签存了，其实用什么存都无所谓，只要能取到值就行)

<script type="text/javascript">
	$(document).ready(function () {
		//文件上传控件初始化及后续操作
		initFileUpload("fileinputId");
		//上传控件回显的图片下追加图片相关数据(表单提交时需要用到)
		initInputFileImg();
	});

	function initFileUpload(elementId){
		//测试图片回显
		var initialPicUrls = "http://demo.ruoyi.vip/img/profile.jpg,http://demo.ruoyi.vip/img/profile.jpg,http://demo.ruoyi.vip/img/profile.jpg";
		var picArr =[];//回显文件数组
		let previewConfig =[];//回显文件类型
		if(initialPicUrls!=null){
			var picArr = initialPicUrls.split(",");
			for(var i=0;i<picArr.length;i++){
				let picUrl = picArr[i];
				previewConfig.push({type:getFileTypeFromUrl(picUrl)});
			}
		}

		var fileElement = $('#' + elementId);
		fileElement.fileinput({
			'theme': 'explorer-fas',
			'uploadUrl': "file/uploadToServer",//上传文件url
			uploadExtraData: {'type':'EXPRESS','fileType':'pic'},//文件上传自定义参数，同文件一起提交
			enctype: 'multipart/form-data',
			overwriteInitial: false,
			initialPreviewAsData: true,
			initialPreview:picArr,
			initialPreviewConfig: previewConfig,
			// uploadAsync:false,
			layoutTemplates :{
				actionUpload:'',//去除上传预览缩略图中的上传图片
			},
			showUpload: false,//不显示底部上传按钮
			showRemove: false,//不显示底部清空按钮
			showCaption: true,//显示底部上传按钮左侧文本(完全是为了美观)
		}).on('filebatchselected', function (event, data) {
			 $(this).fileinput("upload");//这里会根据uploadAsync值自动去执行对应的回调函数
		}).on('fileuploaded', function(event, data, previewId, index) {
			var resultObj = data.response;
			if(resultObj != null && resultObj.code == 0){
				// 这里,二次上传，previewId可能会和之前的重复(每次都从索引0开始)，所以要在upload.js原文件中修改下代码：
				//4660行 源码：$thumb.attr({'id': self.previewInitId + '_' + i, 'data-fileindex': i});
				//修改id值：   $thumb.attr({'id': self.previewInitId + '_i_' + i, 'data-fileindex': i});
				$("#"+ previewId).append("<span class='hidden_img hidden_img_upload' hidden >"+resultObj.fileName+"</span>");
				$.modal.msgSuccess("上传成功");
			}else{
				$.modal.msgError("上传失败");
			}
		}).on('fileerror', function(event, jsonData, previewId, index) {
			$.modal.msgError("上传失败");
		}).on('filebatchuploadsuccess', function(event, data, previewId, index) {
			// alert("同步上传(由于业务需要，要在添加img元素供提交表单使用，同步上传获取不到previewId，所以改用异步提交)");
		}).on('filebatchuploaderror', function(event, data, msg) {
			alert("同步上传失败");
		}).on("filesuccessremove",function (event, previewId, extra) {
			// return confirm("确定删除remove？");
			//这里可以调用接口删除服务器原文件
			$.modal.msgSuccess("移除");
		}).on("fileclear",function (event, previewId, extra) {
			//拒绝移除  如果给移除上传控件所有内容的功能，则系统会重新初始化回显的文件，那么我的 initInputFileImg()函数完全不起作用了，所以，禁用它
			return false;
		})
		/*	.on("filebatchselected",function(event,files){
			var filename = files[0].name;
			alert(filename);
		})*/
		;
	}

	//回显文件类型 参考 http://plugins.krajee.com/file-preview-management-demo
	function getFileTypeFromUrl(url){
		if(url.endsWith('gif')||url.endsWith('jpg')||url.endsWith('jpeg')||url.endsWith('png')){
			return 'image';
		}
		if(url.endsWith('mp4')){
			return 'video';
		}
	}

	//回显文件 对应的div里追加 hidden_img
	function initInputFileImg(){
		$(".file-sortable").each(function(){
			var tempFileName = $(this).find('.kv-file-content').find('.file-preview-image').attr("src");
			$(this).find('.kv-file-content').parent().append("<span class='hidden_img hidden_img_init' hidden >"+tempFileName+"</span>");
		})
	}
	//获取所有文件
	function submitHandler() {
		var imgList = "";
		$(".hidden_img").each(function(){
			imgList = imgList+","+$(this).text();
		})
		$("#imgList").val(imgList);
		alert($("#imgList").val());
	}
</script>

 

三、后端代码

文件上传Controller

//用的ruoyi框架，后台是springboot，所以这里的代码仅供参考

//这里只要知道是用 MultipartFile 接收的文件参数就行了，因为是异步单个文件提交，所以这里用的不是数组或集合接收，下面其他代码基本不用看



/**
 * 通用上传请求 上传到服务器
 */
@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
    {
        String typePath = "path/";//文件夹分类
        // 上传文件路径
        String filePath = "/Users/tempfile/background/";//D:/tempfile/background/
        boolean newName = true;
        String fileName = "";
        // 常规的队file文件的处理    上传并返回新文件名称
        if(fileType.equals("excel")){
            fileName = FileUploadUtils.uploadExcel(filePath + typePath, file,newName);
        }else if(fileType.equals("pic")){
            fileName = FileUploadUtils.uploadPicture(filePath + typePath, file,newName);
        }
        //找个方式封装为json数据
        AjaxResult ajax = AjaxResult.success();
        ajax.put("fileName", fileName);//文件
        ajax.put("localUrl", "/" + typePath + fileName);//相对路径
        return ajax;
    }
    catch (Exception e)
    {
        return AjaxResult.error(e.getMessage());
    }
}

 

业务Controller

//接收其他参数一样，根据imgList的name值获取文件数据