jQuery利用FormData上传文件实现批量上传


Posted in jQuery onDecember 04, 2018

在项目中涉及题库的批量上传功能,在此利用formdata进行文件上传,后台读取,进行批量插入。同时还需要带入teacherId和courseId两个参数,所以将文件和两个参数append到formdata中,传到后台。

jQuery利用FormData上传文件实现批量上传

JQuery 函数的提交按钮执行的函数如下:

<script type="text/javascript">
 //批量上传题库
 function fileSubmit() {
 var questionFile = new FormData();
 var fileObj = document.getElementById("questionFile").files[0];
        // js 获取文件对象,questionFile为文件选择框的Id
 questionFile.append("file", fileObj);
 var teacherId=localStorage.getItem("teacherId");
 questionFile.append("teacherId",teacherId);
 var courseId=localStorage.getItem("courseId");
 questionFile.append("courseId",courseId);
 $.ajax({
  async: false,
  type:"post",
  url:"/questions/batchUpload",
  data:questionFile,
  processData : false, //必须false才会避开jQuery对 formdata 的默认处理
  contentType : false, //必须false才会自动加上正确的Content-Type
  success:function (data) {
  layer.msg("上传成功");
  example.ajax.reload();
  }
 });
 }
 
</script>

需要注意的是以下两点:

  • jQuery 的 ajax 中processData设置为false (表示不需要对数据做处理)
  • jQuery 的 ajax 中contentType设置为false (因为前面已经声明了是‘FormData对象')

Controller 中的方法如下:

@ApiOperation(value = "批量上传题库")
 @RequestMapping(value = "/batchUpload",method = RequestMethod.POST)
 public void batchUploadQuestions(HttpServletRequest request) throws Exception{
 Collection<Part> files = request.getParts();
 questionsService.batchUploadQuestions(files);
 }

Service中的方法如下:

//题库的批量上传
 @Override
 public void batchUploadQuestions(Collection<Part> files) throws Exception {
 Iterator<Part> it = files.iterator();
 Part file = it.next();
 Workbook workbook = null;
 if (file.getSubmittedFileName().endsWith("xlsx")) {
  workbook = new XSSFWorkbook(file.getInputStream());
 } else if (file.getSubmittedFileName().endsWith("xls")) {
  workbook = new HSSFWorkbook(file.getInputStream());
 }
 Cell cell = null;
 List<Questions> questionsList = new ArrayList<>();
 //判断Excel中有几张表,目前设定为一张表
 Sheet sheet = workbook.getSheetAt(0);//获取sheet表
 for (int rowIndex = 2; rowIndex <= sheet.getLastRowNum(); rowIndex++) { //获取到一行
  Row row = sheet.getRow(rowIndex);
  if (row == null) {
  continue;
  }
  Questions questions = new Questions();
  List<String> strList = new ArrayList<>();
  for (int i = 1; i < row.getLastCellNum(); i++) {
        //获取到一列,第一列为序号不需要存入数据库,所以从1开始读
  cell = row.getCell(i);
  String value = "";
  switch (cell.getCellTypeEnum()) {
   case _NONE:
   break;
   case STRING:
   value = cell.getStringCellValue();
   break;
   case NUMERIC:
   Pattern points_ptrn = Pattern.compile("0.0+_*[^/s]+");
   if (DateUtil.isCellDateFormatted(cell)) {//日期
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    value = sdf.format(DateUtil.getJavaDate(cell.getNumericCellValue()));
   } else if ("@".equals(cell.getCellStyle().getDataFormatString())
    || "General".equals(cell.getCellStyle().getDataFormatString())
    || "0_".equals(cell.getCellStyle().getDataFormatString())) {
    //文本 or 常规 or 整型数值
    DecimalFormat df = new DecimalFormat("0");
    value = df.format(cell.getNumericCellValue());
   } else if (points_ptrn.matcher(cell.getCellStyle().getDataFormatString()).matches()) {//正则匹配小数类型
    value = String.valueOf(cell.getNumericCellValue());//直接显示
   }
   break;
   default:
   value = cell.toString();
  }
  if ((i == 2 || i == 3) && value.equals("")) {//此处设计不需要读入的单元格
   strList.clear();
   break;
  }
  strList.add(value);
  }
  if (strList.size() == 9) {
         //对应数据库属性进行存储
  questions.setChapter(strList.get(0));
  questions.setSection(strList.get(1));
  questions.setType(strList.get(2));
  questions.setQuestion(strList.get(3));
  questions.setAnswerA(strList.get(4));
  questions.setAnswerB(strList.get(5));
  questions.setAnswerC(strList.get(6));
  questions.setAnswerD(strList.get(7));
  questions.setAnswerTrue(strList.get(8));
  questionsList.add(questions);
  }
 }
 
    //将前台存进的teacherId也当做文件进行读取
 Part file1 = it.next();
 InputStream inputStream = file1.getInputStream();
 BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
 String line = null;
 String teacherId = "";
 while ((line = bufferedReader.readLine()) != null) {
  teacherId = line;
 }
    
     //将前台传入的courseId当做文件读取
 Part file2 = it.next();
 InputStream inputStream1 = file2.getInputStream();
 BufferedReader bufferedReader1 = new BufferedReader(new InputStreamReader(inputStream1));
 String line1 = null;
 String courseId = "";
 while ((line1 = bufferedReader1.readLine()) != null) {
  courseId = line1;
 }
 batchSaveQuestionList(teacherId, courseId, questionsList);
 }
 
 
   //SQL 语句拼接后传入DAO层进行数据插入
 public void batchSaveQuestionList(String teacherId,String courseId,List<Questions> questionsList){
 String sql = "replace into questions(questionId,courseId,teacherId,chapter,section,type,question,answerA,answerB,answerC,answerD,answerTrue) values";
 for(int i = 0;i<questionsList.size();i++){
  String questionId = String.valueOf(System.currentTimeMillis())+i;
  if(i==0){
  sql+="('"+questionId+"','"+courseId+"','"+teacherId+"','"+questionsList.get(i).getChapter()+"','"+questionsList.get(i).getSection()
   + "','"+questionsList.get(i).getType()+"','"+questionsList.get(i).getQuestion()+ "','"+ questionsList.get(i).getAnswerA()
   +"','"+questionsList.get(i).getAnswerB()+"','"+questionsList.get(i).getAnswerC()+"','"+questionsList.get(i).getAnswerD()
   +"','"+questionsList.get(i).getAnswerTrue()+"')";
  }else{
  sql+=",('"+questionId+"','"+courseId+"','"+teacherId+"','"+questionsList.get(i).getChapter()+"','"+questionsList.get(i).getSection()
   + "','"+questionsList.get(i).getType()+"','"+questionsList.get(i).getQuestion()+ "','"+ questionsList.get(i).getAnswerA()
   +"','"+questionsList.get(i).getAnswerB()+"','"+questionsList.get(i).getAnswerC()+"','"+questionsList.get(i).getAnswerD()
   +"','"+questionsList.get(i).getAnswerTrue()+"')";
  }
 }
 questionsDao.batchSaveQuestionList(sql);
 }

DAO层的数据插入语句:

@Insert("${sql}")
void batchSaveQuestionList(@Param("sql") String sql);

自此即可实现批量上传,需要注意的是,这里定义的文件类型为Part类型。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木,关注三水点靠木公众号的更多精彩内容。

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery实现高级检索功能
May 28 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
jQuery实现网页拼图游戏
Apr 22 #jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
You might like
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
理解javascript对象继承
2016/04/17 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
深入理解Python装饰器
2016/07/27 Python
Python实现定时任务
2017/02/08 Python
深入理解python中的select模块
2017/04/23 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python GUI编程完整示例
2019/04/04 Python
详解Python 中的容器 collections
2020/08/17 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
Java语言的优势
2015/01/10 面试题
中学门卫岗位职责
2013/12/26 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
好媳妇事迹材料
2014/12/24 职场文书
小学生作文评语集锦
2014/12/25 职场文书
员工考勤管理制度
2015/08/06 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python