`

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

阅读更多
对于以模态对话框的方式,实现新增|修改等功能时,在使用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上传文件”涉及了几个关键的技术点,主要包括:Ajax异步提交、模态对话框以及文件上传。下面将详细解析这些知识点。 1. **Ajax异步提交** Ajax...

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

    "关闭模态对话框,刷新父窗口,异步上传文件"是一个常见的需求,它涉及到前端JavaScript技术、模态对话框的处理、页面刷新机制以及文件上传的异步操作。下面我们将详细探讨这些知识点。 首先,模态对话框(Modal ...

    .net 图片上传模态对话框选择程序

    总结来说,".NET 图片上传模态对话框选择程序"是一个集成了文件选择、上传、模态对话框交互等功能的实用工具。在实现时,需兼顾安全、性能和用户体验,以满足现代Web应用的需求。开发者可以通过理解上述原理和技术,...

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

    总结起来,"一个基于ajax技术实现的模式窗体对话框文件上传控件"是一个集成了Ajax、C#和ASP.NET AJAX的前端与后端解决方案,用于提供高效、用户友好的文件上传体验。它利用了现代Web技术的优势,如异步通信、模态...

    MVC4下对话框中使用Uploadify上传多个文件

    JQuery Dialog是JQuery UI的一部分,可以轻松创建具有多种样式和行为的模态或非模态对话框。 要实现在对话框中使用Uploadify,我们需要做以下步骤: 1. **设置环境**:确保已经安装了ASP.NET MVC4、JQuery库、...

    模态窗口在web中的应用

    模态窗口的设计通常分为两种类型:模态对话框(Modal Dialog)和非模态对话框(Non-Modal Dialog)。模态对话框会阻止用户与主页面的交互,直到关闭对话框;而非模态对话框则允许用户在对话框打开的同时继续操作主...

    modal_dialog_base

    在网页或应用程序中,模态对话框(Modal Dialog)是一种重要的用户界面元素,用于显示临时信息或者需要用户确认或输入数据的场景。它们会阻止用户与页面其余部分的交互,直到对话框被关闭。 模态对话框的基础概念:...

    定义消息对话框.rar

    模态对话框要求用户与其交互并关闭后,才能继续在主应用程序中进行其他操作,而非模态对话框则允许用户同时与多个窗口互动。在这个案例中,我们关注的是模态对话框,它通常用于显示警告、询问用户的选择或者获取必要...

    自定义对话框aaaaaaa

    模态对话框要求用户先完成对话框的任务,才能继续使用主程序,而非模态对话框则允许用户在对话框打开的同时进行其他操作。 自定义对话框的实现通常涉及以下几个步骤: 1. **设计UI布局**:根据需求,设计对话框的...

    Android应用源码之进度条对话框Dem-IT计算机-毕业设计.zip

    首先,进度条对话框分为两种类型:模态对话框和非模态对话框。模态对话框会阻塞用户与应用程序其他部分的交互,直到对话框关闭;而非模态对话框则允许用户同时操作应用程序的不同部分。在这个Demo中,我们可能会看到...

    ProgressBar_BackgroundWorker.zip

    在C#.NET编程环境中,有时候我们需要执行一些耗时的操作,如大数据处理、文件上传或下载等,这些操作如果在主线程上运行会阻塞用户界面,导致应用无响应。为了解决这个问题,我们可以使用`BackgroundWorker`组件来...

    调用进度条的对话框

    对话框可以是非模态或模态,模态对话框会阻止用户与主应用程序的其他部分交互,直到对话框关闭,而非模态则允许用户同时处理多个任务。 接下来,我们聚焦于进度条。进度条是一种可视化控件,通过填充的长度来表示...

    弹出框、模态框插件

    8. **模态与非模态对话框**:ArtDialog不仅支持阻塞用户界面的模态对话框,还提供了非模态对话框,后者允许用户在对话框打开时继续操作页面其他部分。 9. **键盘导航**:考虑到无障碍访问,ArtDialog支持键盘快捷键...

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

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

    一个Ext2+SWFUpload做的图片上传对话框的例程

    同时,`Ext2`可能用于创建一个弹出式窗口或模态对话框,展示上传进度、状态信息和上传按钮。 在压缩包中的`uploaddialog`文件夹可能包含了实现这个功能所需的HTML、CSS、JavaScript文件,以及可能的图片和其他资源...

    javascript多文件上传 无刷新

    当文件类型验证通过后,会弹出模态对话框确认上传操作;点击确认后则通过`window.location.href`进行页面重定向至上传处理页面。 #### 四、实现原理 1. **动态生成文件输入框**:通过JavaScript动态创建多个文件...

    安卓开发:多种对话框+获取列表位置值+自定义对话框

    - 在适当的时候使用模态对话框(用户必须响应后才能继续操作),而在其他情况下使用非模态对话框(允许用户在不关闭对话框的情况下进行其他操作)。 通过以上介绍,你应该能理解如何在Android应用中使用多种对话框...

    常用的Javascript对话框控件

    Dialog插件可以创建模态或非模态对话框,支持自定义标题、大小、位置和内容。使用时,首先引入jQuery和jQuery UI库,然后通过`.dialog()`方法将元素转化为对话框。例如: ```javascript $("#myDiv").dialog(); ``...

    asp 大文件上传 更灵活的上传方式

    它通常包含一个模态对话框,用户可以选择文件并进行上传。这种方式允许用户在上传大文件时看到进度,并可以同时执行其他操作。弹窗上传可能需要结合服务器端的脚本来处理文件接收,例如ASP中的`Request`对象。 3. *...

    关于struts2里用javascript刷新window.showModalDialog的父页面

    同时,Struts2还提供了强大的拦截器机制,可以轻松地实现诸如文件上传/下载、国际化等功能。 #### JavaScript与Struts2的结合 在Struts2应用中,JavaScript主要用来处理前端的交互逻辑。例如,可以通过JavaScript...

Global site tag (gtag.js) - Google Analytics