zoukankan      html  css  js  c++  java
  • 通过Ajax提交form表单来提交上传文件


     Ajax 提交form方式可以将form表单序列化 然后将数据通过data提交至后台,例如:



    1. $.ajax({  

    2.      url : "http://localhost:8080/",  

    3.      type : "POST",  

    4.      data : $( '#postForm').serialize(),  

    5.      success : function(data) {  

    6.          

    7.      },  

    8.      error : function(data) {  
    9.         

    10.      }  

    11. });
    但是这种方式如果表单中有需要提交的文件类型 这样则不行 后台接不到数据。

    解决办法:使用 FormData。这里使用jquery 最好使用2.0版本之后 之前应该不支持。例如:

    <form id="form">
    <P class="p5"><span><i>*</i>商户证书:</span>
    <input type='text' name='apiclientType' id='textfield' class='w_txt' >
    <input type='button' class='w_btn' value='上传证书' />
    <input type="file" name="fileField" class="w_file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
    </P>
    </form>



    var formData = new FormData(document.getElementById("form"));//表单id
    $.ajax({
    url: '${ctx}/wmManage/saveWeixinConfig.do' ,
    type: 'POST',
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function (result) {

    }
    })
    ;

    附上后台数据接收:

    @RequestMapping("/saveWeixinConfig")
    @ResponseBody
    public ResultMsg saveWeixinConfig(@RequestParam(value = "fileField",required = false)MultipartFile fileField) throws IOException {

    return "";
    }


  • 相关阅读:
    jsp转向
    什么是 XDoclet?
    tomcat中的几点配置说明
    mysql5问题
    POJ 3734 Blocks
    POJ 2409 Let it Bead
    HDU 1171 Big Event in HDU
    POJ 3046 Ant Counting
    HDU 2082 找单词
    POJ 1286 Necklace of Beads
  • 原文地址:https://www.cnblogs.com/jpfss/p/8946402.html
Copyright © 2011-2022 走看看