使用ajax提交form表单,包括ajax文件上传
<form id="test">
            <input type="file" name="img"/>
            <input type="text" name="username"/>
            <input type="button" value="提" onclick="test();"/>
                        .............
 </form>

大家注意到没有,里面可是有文件的哦!

没错,FormData还支持困扰众多开发者已久的ajax的上传文件,以前我们上传文件,需要写一个表单直接刷新提交,但是这里不需要,下面给出提交代码:

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);
                }
            });        
            get();//此处为上传文件的进度条
        }

  参考文档:http://www.cnblogs.com/zhuxiaojie/p/4783939.html

posted on 2017-08-24 09:44  james-roger  阅读(193)  评论(0编辑  收藏  举报