欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前后端分离时导入excel

程序员文章站 2024-03-20 20:31:16
...

前端页面:
 

<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;
	}