能用ajax以POST实现文件上传吗

Posted 2023-04-08

参考技术A 可以
XMLHttpRequest2中数据类型支持formData，formData就相当于原来的Form表单
提交的格式也跟form表单一样，可以通过它来上传文件

ajax实现文章上传

对于以模态对话框的方式，实现新增|修改等功能时，在使用ajax提交表单数据的时候，必须考虑表单是否包含文件域。

情况1:不包含文件域


  按照$("#form的id").serialize()或者.serializeArray()或者表单数据


  然后再使用$.post();


        var formdata = $("#form1").serializeArray();//无法上传文件的
        alert(formdata);
        var url ="<%= request.getContextPath()%>/upload/demo1";
        $.ajax({
            url:url,
            data:formdata, //name=zhangsan&age=50   {}
                contentType: false,//默认: "application/x-www-form-urlencoded"
                processData: false,//设置 processData 选项为 false，防止自动转换数据格式
            type:"post",
            dataType:"json",
            success:function(data){
                alert(data);
            },
            error:function(er){
                alert(er.responseText);
            }
        });




情况2：包含文件域


  做法1：使用html5提供的新特性：FormData


            var formdata = new FormData(document.getElementById("form1"));//可以上传文件


        var url ="<%= request.getContextPath()%>/upload/demo1";
        $.ajax({
            url:url,
            data:formdata, //name=zhangsan&age=50   {}
                contentType: false,//默认: "application/x-www-form-urlencoded"
                processData: false,//设置 processData 选项为 false，防止自动转换数据格式
            type:"post",
            dataType:"json",
            success:function(data){
                alert(data);
            },
            error:function(er){
                alert(er.responseText);
            }
        });




  做法2：使用jquery.form.js插件


        <script type="text/javascript" ></script>
    <script type="text/javascript" ></script>


    var url ="<%= request.getContextPath()%>/upload/demo2";
        
    $("#form1").ajaxSubmit({  
            type:'post',  
            url:url,  
            clearForm:true,//清空所有表单元素的值
            resetForm:true,//重置所有表单元素的值
            success:function(data){  
                alert(data);  
            },  
            error:function(XmlHttpRequest,textStatus,errorThrown){  
                alert("上传失败了");
            }  
        });