`

模态对话框(解决上传文件)

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

分享到:
评论

相关推荐

    ssm_ajaxsubmit-ajax提交-模态对话框-ajax上传文件

    ssm_ajaxsubmit-ajax提交-模态对话框-ajax上传文件

    关闭模态对话框,刷新父窗口,异步上传文件

    单独的js文件 博文链接:https://susenshine.iteye.com/blog/1154074

    一个基于ajax技术实现的模式窗体对话框文件上传控件

    一个基于ajax技术实现的模式窗体对话框文件上传控件,采用ajax+C#开发实现。

    ZxjayWebExplorer 预览文件列表区域,列出文件目录,及常见的操作

    ZxjayWebExplorer 预览 ...2.提示框,用拖动DIV模拟的模态对话框。 3.目录树部分,外观同Windows资源管理器形似。 4.支持在线压缩解压,Ajax上传下载,新建、编辑文本文件,移动、复制、重命名文件等等操作。

    MvcFileUploader:一个 nuget 包,用于轻松将 blueimp JQuery 文件上传插件集成到 ASP.NET Mvc 应用程序中

    用途: * * 用于从 ajax 加载模态对话框的 JavaScript 的 MvcFileUploader 提供 Html helper 和文件保存实用程序,以保持您的代码干净 特点: * 前端视图包含在项目中。 所以提供了对设计的完全控制。 * 关闭对话框...

    jquery.modal:模态窗口系统插件

    例子创建一个模态加载对话框(完整示例参见 ): var loading = $ . spModal ( 'loading' ) ;loading . addButton ( 'Cancel' , function ( ) { loading . close ( ) ;} ) ; 创建一个模态消息对话框(完整示例参见 ...

    Windows编程循序渐进.part2

    2.1.2 实例:使用Win32 API实现模态对话框 10 2.2 非模态对话框 12 2.2.1 实例:使用MFC实现非模态对话框 12 2.2.2 实例:使用Win32 API实现非模态对话框 13 2.3 属性对话框 14 2.3.1 实例:多页面切换程序 14...

    Windows编程循序渐进.part3

    2.1.2 实例:使用Win32 API实现模态对话框 10 2.2 非模态对话框 12 2.2.1 实例:使用MFC实现非模态对话框 12 2.2.2 实例:使用Win32 API实现非模态对话框 13 2.3 属性对话框 14 2.3.1 实例:多页面切换程序 14...

    osCommerce 3.0.2.zip

    管理与更换一个模态对话框的ErrorLog删除页。 更新的DataTable,以支持可拖动行。 新的公共/上传目录,文件和图像,可手动复制到。 新的JavaScript文件上传脚本来处理单个和多个文件上传。 新的上传类支持...

    uxperiment-sketch-plugin:UXperiment草图导出

    UXperiment Sketch导出 该插件将文档转换为JSON对象,并将其上传到远程API端点。 它具有菜单操作,用于选择初始画板以及设置层到画板以及层到URL的过渡。 该插件是的一部分。... —简单的UI交互:敬酒,模态对话框

    Windows编程循序渐进(清晰完整版)1

    ·第2章,对话框应用程序:熟悉模态、非模态对话框以及通常对话框的原理与使用方法。 ·第3章,基本控件:介绍按钮、编辑框、列表框等基本控件的使用方法。 ·第4章,文档与视图:介绍文档与视图的基本原理。 ·...

    Windows编程循序渐进(清晰完整版)5

    ·第2章,对话框应用程序:熟悉模态、非模态对话框以及通常对话框的原理与使用方法。 ·第3章,基本控件:介绍按钮、编辑框、列表框等基本控件的使用方法。 ·第4章,文档与视图:介绍文档与视图的基本原理。 ·...

    Windows编程循序渐进(清晰完整版)3

    ·第2章,对话框应用程序:熟悉模态、非模态对话框以及通常对话框的原理与使用方法。 ·第3章,基本控件:介绍按钮、编辑框、列表框等基本控件的使用方法。 ·第4章,文档与视图:介绍文档与视图的基本原理。 ·...

    Windows编程循序渐进(清晰完整版)4

    ·第2章,对话框应用程序:熟悉模态、非模态对话框以及通常对话框的原理与使用方法。 ·第3章,基本控件:介绍按钮、编辑框、列表框等基本控件的使用方法。 ·第4章,文档与视图:介绍文档与视图的基本原理。 ·...

    Windows编程循序渐进(清晰完整版)2

    ·第2章,对话框应用程序:熟悉模态、非模态对话框以及通常对话框的原理与使用方法。 ·第3章,基本控件:介绍按钮、编辑框、列表框等基本控件的使用方法。 ·第4章,文档与视图:介绍文档与视图的基本原理。 ·...

    Windows编程循序渐进(清晰完整版)7

    ·第2章,对话框应用程序:熟悉模态、非模态对话框以及通常对话框的原理与使用方法。 ·第3章,基本控件:介绍按钮、编辑框、列表框等基本控件的使用方法。 ·第4章,文档与视图:介绍文档与视图的基本原理。 ·...

    Windows编程循序渐进(清晰完整版)8

    ·第2章,对话框应用程序:熟悉模态、非模态对话框以及通常对话框的原理与使用方法。 ·第3章,基本控件:介绍按钮、编辑框、列表框等基本控件的使用方法。 ·第4章,文档与视图:介绍文档与视图的基本原理。 ·...

    Windows编程循序渐进(清晰完整版)6

    ·第2章,对话框应用程序:熟悉模态、非模态对话框以及通常对话框的原理与使用方法。 ·第3章,基本控件:介绍按钮、编辑框、列表框等基本控件的使用方法。 ·第4章,文档与视图:介绍文档与视图的基本原理。 ·...

    PHP 代码自动生成工具 e-World Tech PHPMaker 2020.0.3 英文特别免费版.rar

    添加选项表单和电子邮件表单作为模态对话框 按网格系统的多列页面 Disallow Concurrent Login允许多个会话 支持在没有启用用户级别安全性的项目中使用$ Security-&gt; CanXXX() 支持文件扩展名,文件大小和最大值的...

    可道云文件管理kodbox 1.15

    所有模态对话框:下拉手势关闭对话框;tab菜单手势滑动切换,包含滚动条时自动过滤;侧边栏手势支持:文件管理树目录,后台菜单侧边栏,个人中心侧边栏;在页面右滑可打开侧边栏,左滑关闭;手势处理:点击元素允许...

Global site tag (gtag.js) - Google Analytics