首页 > 代码库 > jquery.form.min.js插件的使用实例
jquery.form.min.js插件的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息。
尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件,查找资料后得知:
.serialize()序列化表单,提交按钮的值不会被序列化。另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name
属性。此外,复选框(checkbox)和单选按钮(radio)(input
类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外,文件选择元素的数据也不会被序列化。
后面使用了Jquery.form插件来完成了该功能。
前台:
1.导入jquery.min.js和jquery.form.min.js
<script type="text/javascript" src="${ctxStatic}/js/jquery-1.7.2.js"></script><script type="text/javascript" src="${ctxStatic}/js/jquery.form.min.js"></script>
2.设置按钮和隐藏表单
<a class="btn btn-small btn-success" onclick="javascript:inportAdvertiserList();">导入</a><div style="display: none"> <form class="form-inline" id="uploadexcel" name="uploadexcel" action="" method="post" style="padding-bottom: 10px;" enctype="multipart/form-data"> <input type="file" name="excelFile" id="excelFile" onchange="javascript:submitexcelFile()"> </form> </div>
这里按钮是超链接改变样式来实现按钮,普通按钮也可以。div默认位隐藏
3.对应的js函数
<script type="text/javascript"> function inportAdvertiserList() { $("#excelFile").click(); } function submitexcelFile() { $("#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 = http://www.mamicode.com/{"inportAdvertiserList"}) public @ResponseBody ErrorMsg 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 = http://www.mamicode.com/{"inportAdvertiserList"})用来设置请求url,
@ResponseBody用来标记返回指,可以将返回值转换成json数据返回(需要导入相关包)。
后台可以MultipartFile excelFile来取到前台input传过来的file
这次项目中是需要取到前台传过来的excel并解析其中的数据,将其转换为对象存入数据库,部分数据公司相关,后面就不写了。
jquery.form.min.js插件的使用实例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。