随笔 - 6, 文章 - 0, 评论 - 0, 阅读 - 1020
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

ajax实现文件上传

Posted on   Lchao  阅读(126)  评论(0编辑  收藏  举报

对于以模态对话框的方式,实现新增|修改等功能时,在使用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("上传失败了");
            }  
        });





编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 如何打造一个高并发系统?
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
点击右上角即可分享
微信分享提示