Ajax提交带文件的表单

最近在项目中遇到了一个一个小问题，有一个带文件的表单需要用ajax提交，一般不带文件的表单，我们会用到如下的提交方式：

HTML代码

<form id="myformz" action="" method="post">
        用户名<input type="text" id="mobile" name="mobile"> 
        密码<input type="text" id="passwd" name="passwd"> 
        <input type="button" onClick="sbum();">
    </form>

js代码

<script type="text/javascript">
    function subm() {
        $.ajax({
            type : "POST",//提交方式
            url : "loginController/texts.do",//提交地址
            data : $("#myformz").serialize(),//序列化表单值，创建 URL 编码文本字符串。
            success : function(data) {
                alert("请求成功");
            },
            erreo : function(request) {
                alert("请求失败");
            }
        });

    }
</script>

但是，这种方式是不能提交文件的，后台根本检测不到提交的数据中有文件； data : $(“#myformz”).serialize(),//序列化表单值，创建 URL 编码文本字符串。这段代码就是把表单的值序列化了。固然后台接不到文件信息，接下来就可以用如下方式解决。请看代码：

HTML代码

<form id="myForm">
        用户名<input type="text" id="mobile" name="mobile"> 
        密码<input type="text" id="passwd" name="passwd"> 
        图片<input type="file" id="lastname" name="file">
        <input type="button" onClick="sbum();">
    </form>

js代码

<script type="text/javascript">

    //验证上传的图片格式是否正确
    function subm() {

        var filepath = $("input[name='file']").val();

        if(filepath !=""){
        var extStart = filepath.lastIndexOf(".");
        var ext = filepath.substring(extStart, filepath.length).toUpperCase();

        if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG"
                && ext != ".JPEG") {
            alert("图片限于bmp,png,gif,jpeg,jpg格式");
            return false;
        } else {

    //提交表单
    submTo();

    }
        }else{
        //提交表单
        submTo();
        }
    }

    //提交表单的方法
        function submTo(){

               var form=new FormData(document.getElementById("myForm"));//拿到表单对象
                $.ajax({
                type : "POST",//提交方式
                url : "gallery/updateGa.do",//提交地址
                data:form,
                processData:false,
                contentType:false,
                success : function(data) {
                if(data=="1"){
                alert("修改成功！");
                }else{
                alert("网络错误，请重试！！！");
                }

                },
                erreo : function(request) {
                    alert("网络错误，请重试！！！");
                }
            });


    }

</script>

上述代码中 processData:false, contentType:false,
必须设置为false。如上所示，一个简单的带文件的表单提交就完成了。