Bootstrap .fileinput() 批量上传文件并回调

最新推荐文章于 2024-09-20 20:51:06 发布

Louis__lv

最新推荐文章于 2024-09-20 20:51:06 发布

阅读量2.4k

点赞数 2

分类专栏： JAVA工作日常文章标签： java bootstrap

本文链接：https://blog.csdn.net/Louis__lv/article/details/119808499

版权

本文记录了一个项目中批量上传文件并回调处理的实现过程。前端使用Bootstrap的.fileinput()功能，通过设置uploadAsync属性控制同步或异步上传。同步上传时，回调函数为'filebatchuploadsuccess'，异步则是'fileuploaded'。后台需根据uploadAsync的设置，调整MultipartFile参数类型。注意前端与后台参数名的一致性，以及同步、异步上传的处理方式。

摘要由CSDN通过智能技术生成

最近项目做了个批量上传文件解析后导出结构化数据的功能，批量上传文件并回调是遇到的一个难点，下面简单做个记录。

前端

使用Bootstrap自带的文件上传功能.fileinput()。首先是文件的控件：

<input class="projectfile" id="attach" multiple name="attach" type="file" />

点击上传事件：

<script type="text/javascript">
$(function() {
	//点击上传事件
	$('#save').click(function(){
		if($("#attach").val() != ""){
			$("#attach").fileinput("upload");
			showLoading();
		}
	});

	//上传功能
	$('#attach').fileinput({
		language: 'zh', //设置语言
		dropZoneTitle: '支持pdf批量上传，最多1000M限制',//文字提醒
		uploadUrl:'${pageContext.request.contextPath}/attach/upload',//上传地址
		showRemove:false,
		showUpload:false,  // showRemove, showUpload都为false时，不会显示拖拽框
		enctype: 'multipart/for