实现功能:页面导入按钮点击后,弹出文件选择框,选择excel文件点击选择后,后台处理文件并将数据插入到数据库。
页面部分:不需要处理返回值可以直接使用form提交,我需要在页面展示添加了几条数据,没找到form提交成功的处理函数,所以使用了jquery.form插件(注意
:先加载jquery再加载jquery.form)
1.需要返回值写法
html:
<form action="url" id="uploadForm" method="post" enctype="multipart/form-data" >
<input type="file" name="fileInfo" onchange="uploadFormSubmit()">
</form>
js(使用ajaxSubmit代替form的提交):
function uploadFormSubmit(){
$("#uploadForm').ajaxSubmit((data)=>{
//这里得到后台的返回值
})
}
2.不需要返回值写法
html:
<form action="url" id="uploadForm" method="post" enctype="multipart/form-data" >
<input type="file" name="fileInfo" onchange="javascript:this.form.submit()">
</form>
后端部分(需要 servlet3.0+才可以使用Part,另外3.0可以使用注解方式配置,3.0-则需要在配置文件中配置访问路径)注意:XSSFWorkbook 只能处理xlsx
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.IOException;
import java.io.InputStream;
@WebServlet(name ="importServlet", urlPatterns="import/*")
//这个一定要配置,否则获取到的part是null
@MultipartConfig(
maxFileSize = 100*1024,
maxRequestSize = 100*1024
)
public class ImportServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Part part = req.getPart("fileInfo");
InputStream is = part.getInputStream();
int result=0;//添加成功记录数
XSSFWorkbook workbook = new XSSFWorkbook(is);//这就获取到文件了,
//poi等工具的解析 代码省略
//添加到数据库的逻辑并且得到添加数据的记录数赋值给result 代码省略
//返回给页面
resp.setCharacterEncoding("utf-8");
resp.setContentType("application/json;charset=utf-8");
String jsonStr="{\"add items\":\""+ result + "\"}";
resp.getWriter().write(jsonStr);
}
}