使用提交表单及上传文件（适用于aspx）

上传表单（包括文件），无论使用的是.net aspx，还是jsp（java)，都是必须使用的技术。本人这几天使用的是aspx，如果使用原始的aspx控件的话，虽然同样有效，但是不利于代码移植到jsp，通用性较差；同样，如果使用mvc的razor 语法生成表单控件及使用form input submit提交，同样也会影响移植性，所以，我们有必要考虑使用一种通用的方式在不同的代码框架下来提交表单（包括上传文件）。

最常用的代码方式是这样的：

$.post(path,{data:data},function(data){
    ...
},"json");

或者说是这样：

$.ajax({
                url:"${pageContext.request.contextPath}/public/testupload",
                type:"post",
                data:{username:username},
                success:function(data){
                    window.clearInterval(timer);
                    console.log("over..");
                },
                error:function(e){
                    alert("错误！！");
                    window.clearInterval(timer);
                }
            });

var username = $("#username").val();
var password = $("#password").val();

但是如果我们的表单项很多的话，是不是需要很多上面这样的取值语句，好麻烦是不是？
根据这篇文章（https://www.cnblogs.com/zhuxiaojie/p/4783939.html）,提供了两种方法：

方法一：使用FormData对象
FormData对象是html5的一个对象，目前的一些主流的浏览器都已经兼容。不支持FormData的，可以使用方法二，下面会介绍。接着说FormData，它是一个html5的javascript对象，非常的强大。FormData可以凭空创建一个对象，然后往这个对象里面添加数据，然后直接提交，不需要写一行html代码，如下：

var form = new FormData();
form.append("username","zxj");
form.append("password",123456);
var req = new XMLHttpRequest();
req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
req.send(form);

或者说是：

var form = new FormData();
form.append("username","zxj");
form.append("password",123456);
$.ajax({
                url:"${pageContext.request.contextPath}/public/testupload",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
                    window.clearInterval(timer);
                    console.log("over..");
                }
});

这样就可以直接发送数据到后台。但是这样还是很麻烦是不是?只是换了一种麻烦的方式。重点来了：
FormData支持直接从html中的表单生成数据，就是在html页面中已经有数据了，然后FormData可以直接把这个表单的数据写入这个对象，然后直接提交给后台

<form id="tf">
            <input type="file" name="img"/>
            <input type="text" name="username"/>
            <input type="button" value="提" οnclick="test();"/>
                        .............
</form>

注意到没有，里面有文件！

function test(){
            var form = new FormData(document.getElementById("tf"));
//             var req = new XMLHttpRequest();
//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
//             req.send(form);
            $.ajax({
                url:"${pageContext.request.contextPath}/public/testupload",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
                    window.clearInterval(timer);
                    console.log("over..");
                },
                error:function(e){
                    alert("错误！！");
                    window.clearInterval(timer);
                }
            });        
}

就是这么简单，使用FormData，在构造这个对象的时候，把表单的对象，作为一个参数放进去，就可以了，然后FormData，就会得到这个表单对象里面的所有的参数，甚至我们在表单中，都不需要声明enctype ="multipart/form-data" ，就可以直接提交。使用FormData，第一是在提交表单的时候，不需要写大量的js来获得表单数据，直接把表单对象构造就行了。第二就是可以直接异步上传文件，简单牛逼爆了！

注意：根据这篇文章反映，如果使用jsp 或者说java的spring mvc,同时使用FormData提交的时候，表单提交的是request payload，具体有兴趣的同学可以自己百度，它不是之前的Form data提交的，所以后台也是要经过处理的，比如springMVC就需要配置

<!-- 配置nultipartresolver,注意：id名必须这样写，不然会报错 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="UTF-8"></property>
    <property name="maxInMemorySize" value="10240000"></property>
</bean>

然会接收不到数据，当然，后台的话，我们这里就先不管。

对于使用aspx的，aspx的页面代码为：

<form id="form1">
     <input type="hidden" name="action" id="action" value="submit"/>
     <input class="easyui-textbox" type="text" name="txtPrincipal" data-options="required:true" style="margin-top: 5px; margin-bottom: 5px;" value="<%=selfcheck.CheckPerson%>" />
     <textarea class="easyui-textbox" name="message" > <%=selfcheck.Comment %></textarea>
     上传新文件：  <input type="file" id="wenjian" name="wenjian" title="上传新文件" />
</form>

后台接收代码类似为：

string action = Utils.RequestToString(Request.Params["action"]);
if (action =="submit")
{
    string person = Request["txtPrincipal"].ParseTo<string>(string.Empty);
    string message = Request["message"].ParseTo<string>(string.Empty);
    if(HttpContext.Current.Request.Files.Count>0)
    {
         HttpFileCollection files = HttpContext.Current.Request.Files;
         for (int i = 0; i < files.Count; i++)
         {
              HttpPostedFile file = files[i];
              var m=file.FileName;
          }    
    }
    Response.ContentType = "text/plain";
    Response.Write("success!");    
    Response.End();
}

方法二：使用jquery.form.js
Jquery.form.js是一个强大的表单插件，其大量的提供了表单操作的各种简便的方法，这里不详细讲解。



参考文章：

https://www.cnblogs.com/zhuxiaojie/p/4783939.html

https://www.cnblogs.com/Hackerman/p/4235045.html