前后端分离时导入excel

最新推荐文章于 2025-05-14 11:55:49 发布

若往夕之

最新推荐文章于 2025-05-14 11:55:49 发布

阅读量4.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/java_chegnxuyuan/article/details/94734833

js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个前端页面的文件上传功能实现，包括HTML表单设计与JS验证提交过程，以及后端Java代码如何接收并处理上传的文件，完成数据导入任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端页面：

<article class="page-container">
	<form action="" method="post" class="form form-horizontal" enctype="multipart/form-data" id="form-duty-upload">
		<div id="tab-category" class="HuiTab">
			选择文件:
			<span class="btn-upload form-group">
			  <input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly><a href="javascript:void();" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
			  <input type="file" multiple name="file" id="file" class="input-file">
			</span>
			<p style="color: red;">上传的文件必须解密，不然会出现导入失败</p>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
				</div>
			</div>
		</div>
	</form>
</article>

前端js:

<script type="text/javascript">
	
	$("#form-duty-upload").validate({
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			var uploadFile = new FormData($("#form-duty-upload")[0]);
			uploadFile.enctype="multipart/form-data";
			var controlType = parent.$("#controlType_hide").val()
			uploadFile.append("controlType",controlType);
			var addDicParam = {
				url:ss.urlMapping['UPLOADDATA'],
				param: uploadFile,
				callback:function(data){
					var code = data.returnCode;
					if(code == '1'){
						var index = parent.layer.getFrameIndex(window.name);
						parent.$('#search_btn').click();
						parent.layer.close(index);
					}else{
						$.Huimodalalert(data.data,4000);
					}
				},
			    errCallback: function () {
			    	$.Huimodalalert('导 入 信  息 失 败',2000);
			    }
			}
			ss.upload(addDicParam);
		}
	});
</script>

ss.upload方法：

ss.upload = function(params){
    	console.info(params.param);
    	return $.ajax({
            type: "POST",
            url: params.url,
            cache: false,
            data: params.param,
            processData: false,
            contentType: false,
            dataType:"json",
            /*enctype:"multipart/form-data",*/
            success: function (data) {
                if(data.returnCode == '401' || data.returnCode == '403'){
                    	location.href="/";
                    	return null;
                }else{
                	if (undefined !== params.callback) {
	                    params.callback(data);
	                }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (params.errCallback) {
                    params.errCallback(XMLHttpRequest, textStatus, errorThrown);
                }else{
                    var errorMsg = "网络异常,请重新进入";
                    alert(errorMsg);
                }
            }
        });
    };

后台java代码：

@RequestMapping(value = "import")
	@ResponseBody
	public ResultMsg<Object> importDuty(@RequestParam("file") MultipartFile file, HttpServletRequest request){
		long createdBy = (long)request.getSession().getAttribute("CURRENT_USER");
		ResultMsg<Object> rs = new ResultMsg<Object>();
		boolean a = false;
		String fileName = file.getOriginalFilename();
		try {
			a = driverBenefitService.batchImport(fileName, file, createdBy);
			rs = ResultMsg.returnMsgSuccess("文件导入成功");
		} catch (Exception e) {
			e.printStackTrace();
			logger.error(e.getMessage());
			rs = ResultMsg.returnMsgFail(e.getMessage());
		}
		return rs;
	}