第一次写导入excle文件的功能,需求点击选择文件上传,然后点击确定后文件上传请求后台接口,保存数据.最初选择layui的 upload控件,发现它有两种方式,一时点击选择文件就触发请求后台接口,不符合我现在的需求;另外一种就是点击上传文件,然后在点击其他按钮事件触发后台接口的请求,问题是这里要求文件的格式只能是图片,最终选择放弃,选择了最原始的 input type = " file " 下面是前端页面的代码,以及ajax的请求代码
<div> <div class="contain"> <div class="wenzi">附件上传</div> <div class="form_msg"> <form action="" enctype="multipart/form-data" method="post" > <input id="file" type="file" name="file" /> <button type="button" class="xiazai" id="excleMuban">Excel模板下载</button> </form> <div class="rec_buttom"> <button class="layui-btn layui-btn-normal" id="save">确定</button> <button class="layui-btn layui-btn-normal" id="cancel">取消</button> </div> </div> </div> </div>
<script> $(document).ready(function() { $('#cancel').click(function() { parent.location.reload(); }) $("#excleMuban").click(function(){ //调用导出接口 window.location.href='${ctx}/exindustry/exportTemplate'; }); $("#save").click(function(){ var fileM=document.querySelector("#file"); //获取文件对象,files是文件选取控件的属性,存储的是文件选取控件选取的文件对象,类型是一个数组 var fileObj = fileM.files[0]; // 创建 var formData = new FormData(); // 获取文件 formData.append("file", fileObj); console.log(formData) $.ajax({ url: '${ctx}/exindustry/upload', type: "post", dataType: "json", data: formData, cache: false, contentType: false, processData: false, success: function (result) { if(result.code==0){ layer.msg(result.msg,{icon: 6,time:2000}, function () { //重新加载父页面 parent.location.reload(); }); }else { layer.msg(result.msg,{icon: 5,time:2000}); } }, }); }); }) </script>
springMVC文件的配置 这里可以设置支持文件的格式,以及文件的大小,这里我没有写,需要
<!-- 支持文件上传 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 设定默认编码 --> <property name="defaultEncoding" value="UTF-8"></property> </bean>