zoukankan      html  css  js  c++  java
  • 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" src="jquery-1.10.2.js"></script>
        <script type="text/javascript" src="jquery.form.js"></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("上传失败了");
                }  
            });



  • 相关阅读:
    用Visual Studio2010 编译 C++文件"hello world”
    hdu 1010 Tempter of the Bone(dfs+奇偶剪枝)
    最长子串(动态规划)
    C++中,访问字符串的三种方法
    POJ3260:The Fewest Coins(混合背包)
    如何做好基层技术管理工作?
    UVa10651(记忆化搜索)
    <Win32_5>深入浅出Win32的计时器
    【转载】一步一步写算法(之hash表)
    C可变参数函数 实现
  • 原文地址:https://www.cnblogs.com/ws1313123/p/6424846.html
Copyright © 2011-2022 走看看