正文

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

IP云
IP云V管理员/0 阅读
12/02
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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

尝试过使用$.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 = {"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 = {"inportAdvertiserList"})用来设置请求url,
 @ResponseBody用来标记返回指，可以将返回值转换成json数据返回（需要导入相关包）。
后台可以MultipartFile excelFile来取到前台input传过来的file

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

相关阅读

目录[+]