对于以模态对话框的方式,实现新增|修改等功能时,在使用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上传文件”涉及了几个关键的技术点,主要包括:Ajax异步提交、模态对话框以及文件上传。下面将详细解析这些知识点。 1. **Ajax异步提交** Ajax...
"关闭模态对话框,刷新父窗口,异步上传文件"是一个常见的需求,它涉及到前端JavaScript技术、模态对话框的处理、页面刷新机制以及文件上传的异步操作。下面我们将详细探讨这些知识点。 首先,模态对话框(Modal ...
总结来说,".NET 图片上传模态对话框选择程序"是一个集成了文件选择、上传、模态对话框交互等功能的实用工具。在实现时,需兼顾安全、性能和用户体验,以满足现代Web应用的需求。开发者可以通过理解上述原理和技术,...
总结起来,"一个基于ajax技术实现的模式窗体对话框文件上传控件"是一个集成了Ajax、C#和ASP.NET AJAX的前端与后端解决方案,用于提供高效、用户友好的文件上传体验。它利用了现代Web技术的优势,如异步通信、模态...
JQuery Dialog是JQuery UI的一部分,可以轻松创建具有多种样式和行为的模态或非模态对话框。 要实现在对话框中使用Uploadify,我们需要做以下步骤: 1. **设置环境**:确保已经安装了ASP.NET MVC4、JQuery库、...
模态窗口的设计通常分为两种类型:模态对话框(Modal Dialog)和非模态对话框(Non-Modal Dialog)。模态对话框会阻止用户与主页面的交互,直到关闭对话框;而非模态对话框则允许用户在对话框打开的同时继续操作主...
在网页或应用程序中,模态对话框(Modal Dialog)是一种重要的用户界面元素,用于显示临时信息或者需要用户确认或输入数据的场景。它们会阻止用户与页面其余部分的交互,直到对话框被关闭。 模态对话框的基础概念:...
模态对话框要求用户与其交互并关闭后,才能继续在主应用程序中进行其他操作,而非模态对话框则允许用户同时与多个窗口互动。在这个案例中,我们关注的是模态对话框,它通常用于显示警告、询问用户的选择或者获取必要...
模态对话框要求用户先完成对话框的任务,才能继续使用主程序,而非模态对话框则允许用户在对话框打开的同时进行其他操作。 自定义对话框的实现通常涉及以下几个步骤: 1. **设计UI布局**:根据需求,设计对话框的...
首先,进度条对话框分为两种类型:模态对话框和非模态对话框。模态对话框会阻塞用户与应用程序其他部分的交互,直到对话框关闭;而非模态对话框则允许用户同时操作应用程序的不同部分。在这个Demo中,我们可能会看到...
在C#.NET编程环境中,有时候我们需要执行一些耗时的操作,如大数据处理、文件上传或下载等,这些操作如果在主线程上运行会阻塞用户界面,导致应用无响应。为了解决这个问题,我们可以使用`BackgroundWorker`组件来...
对话框可以是非模态或模态,模态对话框会阻止用户与主应用程序的其他部分交互,直到对话框关闭,而非模态则允许用户同时处理多个任务。 接下来,我们聚焦于进度条。进度条是一种可视化控件,通过填充的长度来表示...
8. **模态与非模态对话框**:ArtDialog不仅支持阻塞用户界面的模态对话框,还提供了非模态对话框,后者允许用户在对话框打开时继续操作页面其他部分。 9. **键盘导航**:考虑到无障碍访问,ArtDialog支持键盘快捷键...
ZxjayWebExplorer 预览 ...2.提示框,用拖动DIV模拟的模态对话框。 3.目录树部分,外观同Windows资源管理器形似。 4.支持在线压缩解压,Ajax上传下载,新建、编辑文本文件,移动、复制、重命名文件等等操作。
同时,`Ext2`可能用于创建一个弹出式窗口或模态对话框,展示上传进度、状态信息和上传按钮。 在压缩包中的`uploaddialog`文件夹可能包含了实现这个功能所需的HTML、CSS、JavaScript文件,以及可能的图片和其他资源...
当文件类型验证通过后,会弹出模态对话框确认上传操作;点击确认后则通过`window.location.href`进行页面重定向至上传处理页面。 #### 四、实现原理 1. **动态生成文件输入框**:通过JavaScript动态创建多个文件...
- 在适当的时候使用模态对话框(用户必须响应后才能继续操作),而在其他情况下使用非模态对话框(允许用户在不关闭对话框的情况下进行其他操作)。 通过以上介绍,你应该能理解如何在Android应用中使用多种对话框...
Dialog插件可以创建模态或非模态对话框,支持自定义标题、大小、位置和内容。使用时,首先引入jQuery和jQuery UI库,然后通过`.dialog()`方法将元素转化为对话框。例如: ```javascript $("#myDiv").dialog(); ``...
它通常包含一个模态对话框,用户可以选择文件并进行上传。这种方式允许用户在上传大文件时看到进度,并可以同时执行其他操作。弹窗上传可能需要结合服务器端的脚本来处理文件接收,例如ASP中的`Request`对象。 3. *...
同时,Struts2还提供了强大的拦截器机制,可以轻松地实现诸如文件上传/下载、国际化等功能。 #### JavaScript与Struts2的结合 在Struts2应用中,JavaScript主要用来处理前端的交互逻辑。例如,可以通过JavaScript...