因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息。

尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件,查找资料后得知:

.serialize()序列化表单,提交按钮的值不会被序列化。另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name 属性。此外,复选框(checkbox)和单选按钮(radio)(input类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外,文件选择元素的数据也不会被序列化。

后面使用了Jquery.form插件来完成了该功能。

前台:

1.导入jquery.min.js和jquery.form.min.js

<scripttype="text/javascript"src="${ctxStatic}/js/jquery-1.7.2.js"></script>
<scripttype="text/javascript"src="${ctxStatic}/js/jquery.form.min.js"></script>

2.设置按钮和隐藏表单

 <aclass="btn btn-small btn-success"onclick="javascript:inportAdvertiserList();">导入</a><divstyle="display: none"><formclass="form-inline"id="uploadexcel"name="uploadexcel"action=""method="post"style="padding-bottom: 10px;"enctype="multipart/form-data"><inputtype="file"name="excelFile"id="excelFile"onchange="javascript:submitexcelFile()"></form></div>

这里按钮是超链接改变样式来实现按钮,普通按钮也可以。div默认位隐藏

3.对应的js函数

<scripttype="text/javascript">functioninportAdvertiserList(){$("#excelFile").click();}functionsubmitexcelFile(){$("#uploadexcel").ajaxSubmit({url:"${ctx}/advertiser/inportAdvertiserList",type:"post",enctype:'multipart/form-data',//iframe: true,
dataType:'json',success:function(data){//var msg = eval(data);
alert(data.errMsg);window.location.reload();},error:function(data){//var msg = eval(data);
alert("出错");//msg.errCode
}})}</script>

这里注意Id选择器和input的name(后台取值会用到),url位后台地址

后台:

@RequestMapping(value = {"inportAdvertiserList"})public@ResponseBodyErrorMsg inportAdvertiserList(MultipartFile excelFile, ModelAndView model,HttpServletRequest request, HttpServletResponse response){String[] tableHander= {"平台", "账户ID", "账户名称", "是否ROI账户", "客户名称", "销售人员"};String[] fileNames= {"platformName", "advertiser_id", "corporation_name", "roi", "customerName", "solder.name"};List<Object> list = null;
list = ExcelUtil.readExcel(excelFile, Advertiser.class, tableHander, fileNames);
}

后台是ssm构建的,

@RequestMapping(value = {"inportAdvertiserList"})用来设置请求url,
 @ResponseBody用来标记返回指,可以将返回值转换成json数据返回(需要导入相关包)。后台可以MultipartFile excelFile来取到前台input传过来的file

这次项目中是需要取到前台传过来的excel并解析其中的数据,将其转换为对象存入数据库,部分数据公司相关,后面就不写了。

转载于:https://www.cnblogs.com/LeoBoy/p/5831302.html

异步提交表单插件jquery.form.min.js的使用实例相关推荐

  1. Form表单插件jquery.form.js

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubm ...

  2. jQuery插件 -- Form表单插件jquery.form.js

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...

  3. servlet html js提交表单,使用jquery.form.js实现form表单无刷新提交简单示例

    直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代码吧,代码比较简单! Servlet代码: package com.pro ...

  4. jQuery.Form.js 异步提交表单使用总结

    jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js 1 <scrip ...

  5. jquery 上传图片 java_jquery 异步提交表单 上传图片小例子

    这次做ecshop项目用到了一些小东西,这里我就把在项目中用到的一个异步上传多个产品图片的小东西,不是多好,但是是我自己查资料搞出来的.放这里,给自己和大家一个参考,欢迎丢砖!(jquery+spri ...

  6. 如何异步提交表单 如何异步跨域提交表单

    1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 代码: 使用 jQuery 异步提交表单 <html xmlns="http ...

  7. HTML 提交表单,JQuery接收内容

    HTML 提交表单,JQuery接收内容,示例如下: <!DOCTYPE html> <html lang="en"> <head><me ...

  8. Form表单序列化Json插件-jquery.serializejson.min.js

    Form表单参数序列化成Json对象: 1. 使用serializeJsonObject 2. jquery.serializejson.min.js 1. 使用serializeJsonObject ...

  9. MVC之AJAX异步提交表单

    第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...

最新文章

  1. (卓今京)Java 基础
  2. .net中使用反射的简单例子
  3. mdkstc系列器件支持包下载_WPS Office 2019 For Linux(2020/10/21)更新-支持PDF编辑
  4. Win7下安装配置OpenCV2.3+Visual Studio 2008
  5. 活动目录系列之二:单域环境的实现(单站点)
  6. php 查询出来的字段名全是小写或者大写
  7. PINN物理驱动的深度学习方法入门到详解
  8. 铁甲小宝像车轮的是什么机器人_铁甲小宝里的机器人都叫什么名字啊
  9. 2023中南大学计算机考研信息汇总
  10. win7命令更新补丁
  11. Bootstrap栅格系统 xs sm md lg xl
  12. 【子集/组合/全排列】C语言框架
  13. 如何采集人类高质量脑电波?| 脑电设备推荐
  14. 黑鹰的学习网站--感兴趣的可以去看看
  15. Mac安装eDEX-UI以及后续Python环境配置
  16. js中的var是什么意思
  17. java argument是什么_第2期:argument、parameter以及option有什么区别?
  18. 十大常用电子元器件背后的门道
  19. 阿里云域名购买、认证、解析 腾讯企业邮箱注册、解析
  20. 数学建模——存贮模型

热门文章

  1. 阿里凑单算法首次公开!打包购商品挖掘系统解析
  2. 使命召唤 战区:战术竞技新思路,卷入RPG元素的激烈战斗
  3. 《伊甸之路》:离“现象级”一步之遥
  4. 【逆水寒三周年】大型MMO项目UI管理的价值与责任
  5. Unity VR游戏开发干货教程:优化VR体验
  6. Cocos Creator 3D 材质系统:曲面效果如何实现?
  7. HTTP状态码对照表(全部状态_建议收藏)
  8. 几种常见数据库连接池的使用比较
  9. node.js 函数定义和调用
  10. Java中的四种引用方式的区别