网址:http://malsup.com/jquery/form/
jquery form插件是用于在页面使用ajax上传表单、文件,不刷新的功能,直接开始例子:
有两种方式: ajaxForm 和ajaxSubmit ,前者直接在文档加载完成之后绑定到form上即可,在页面提交的时候会自动触发里面的处理,后者表示手动调用插件的ajax提交时机,可以在form提交的时候触发ajaxSubmit,也可以在一个button的click事件里面触发ajaxSubmit
先使用ajaxSubmit:
页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'upload.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="<%=basePath %>common/js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="<%=basePath %>common/js/jquery.form.js"></script> <script type="text/javascript"> $(document).ready(function() { */ //在form提交的时候触发,这个触发的时机是自己控制的,例如也可以在一个button的click事件里面触发ajaxSubmit $("#myForm").submit(function(){ $('#myForm').ajaxSubmit({ beforeSubmit:handleBeforeSubmit, success:handleSuccess }); //记得返回false,阻止页面的默认提交行为 return false; }); }); /** * 提交请求发出之前的处理 */ function handleBeforeSubmit(){ console.info('提交请求发出之前的处理') } /** * 上传成功后的处理 */ function handleSuccess(){ console.info('上传成功后的处理') alert('上传成功 !'); } </script> </head> <body> <form action="upload/uploadFile.htm" method="post" enctype="multipart/form-data" id="myForm"> <label for="myFile">选择文件:</label> <input type="file" name="myFile" /> <input type="hidden" name="myfield" value="myvalue"> <input type="submit" value="上传"/> </form> </body> </html>
或者:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'upload.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="<%=basePath %>common/js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="<%=basePath %>common/js/jquery.form.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#myForm').ajaxForm({ beforeSubmit:handleBeforeSubmit, success:handleSuccess }); }); /** * 提交请求发出之前的处理 */ function handleBeforeSubmit(){ console.info('提交请求发出之前的处理') } /** * 上传成功后的处理 */ function handleSuccess(){ console.info('上传成功后的处理') alert('上传成功 !'); } </script> </head> <body> <form action="upload/uploadFile.htm" method="post" enctype="multipart/form-data" id="myForm"> <label for="myFile">选择文件:</label> <input type="file" name="myFile" /> <input type="hidden" name="myfield" value="myvalue"> <input type="submit" value="上传"/> </form> </body> </html>
都是一样的效果,后台action(这里使用struts2)
struts.xml配置:
<!-- 处理文件上传 --> <action name="uploadFile" class="uploadFileAction" method="uploadFile"> </action>
后台Action:
package com.tch.test.template.web.action; import java.io.File; import org.apache.commons.io.FileUtils; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Component; import java.io.IOException; import com.opensymphony.xwork2.ActionSupport; @Component("uploadFileAction") @Scope("prototype") public class UploadFile extends ActionSupport { private static final long serialVersionUID = 1L; private File myFile; private String myFileContentType; private String myFileFileName; private String destPath; private String myfield; public void uploadFile() { /* Copy file to a safe location */ destPath = "e:/"; try { System.out.println("Src File name: " + myFile); System.out.println("Dst File name: " + myFileFileName); System.out.println("myfield : "+myfield); File destFile = new File(destPath+myFileFileName); FileUtils.copyFile(myFile, destFile); } catch (IOException e) { e.printStackTrace(); } } public File getMyFile() { return myFile; } public void setMyFile(File myFile) { this.myFile = myFile; } public String getMyFileContentType() { return myFileContentType; } public void setMyFileContentType(String myFileContentType) { this.myFileContentType = myFileContentType; } public String getMyFileFileName() { return myFileFileName; } public void setMyFileFileName(String myFileFileName) { this.myFileFileName = myFileFileName; } public String getMyfield() { return myfield; } public void setMyfield(String myfield) { this.myfield = myfield; } }
OK。
相关推荐
- 引入jQuery库和jQuery Form插件:首先确保引入jQuery库,然后引入`jquery.form.js`。 - 初始化插件:通过`$('form').ajaxForm(options)`或`$('form').form(options)`来启用插件,并设置相应的配置选项。 - 配置...
jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件,实现完美的表单异步提交。 首先,我们需要了解jQuery.form...
《jQuery Form插件详解及其应用》 jQuery Form插件,基于jQuery库,是用于处理HTML表单的增强工具,能够方便地实现异步提交、文件上传等功能,极大地简化了前端开发人员的工作。在这个主题中,我们将深入探讨jQuery...
jquery的一个form插件,通过很简单的ajaxForm和ajaxSubmit两个函数,就可以自动获取指定表单的所有信息并提交,省略手写jquery的ajax函数的繁琐过程。文件里除了这个插件拥有的一些函数外,还包含函数使用的解释代码...
总结来说,jQuery Form插件是提升Web应用表单交互体验的强大工具,它简化了Ajax提交表单的流程,同时提供了丰富的自定义选项和事件处理,使开发者能够轻松处理复杂的表单提交场景。结合后端处理,如`submit.php`,...
**jQuery validate 和 form 插件详解** 在网页开发中,用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...
**jQuery Form插件详解** jQuery Form插件是jQuery库中的一个强大工具,它极大地简化了HTML表单的处理,提供了异步提交(AJAX)功能,使得用户在无需页面刷新的情况下就能发送表单数据,提高了用户体验。这个插件...
"jqueryform.js"是一个非常实用的jQuery插件,它简化了这一过程,提供了对表单的AJAX化支持,包括文件上传和进度显示功能。本文将深入探讨jQuery Form插件的原理、使用方法以及实际应用。 首先,jQuery Form插件的...
首先,我们要理解jQuery Form插件的核心功能。它提供了一种简单的方法来处理表单提交,支持异步AJAX提交,这意味着用户在提交表单时无需离开当前页面,提高了交互性。此外,该插件还提供了丰富的反馈机制,如进度条...
jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制。
《jQuery Form AJAX插件详解与应用实践》 在Web开发中,jQuery库以其简洁的API和强大的功能,深受开发者喜爱。而jQuery Form AJAX插件则是jQuery库中的一个实用工具,它使得表单提交过程变得更加简单、高效,尤其在...
在这个压缩包中,我们重点探讨的是几个基于 jQuery 的核心插件,它们分别是:jQuery UI、jQuery Form、jQuery Validate 和 jQuery vsdoc。 1. **jQuery UI** jQuery UI 是一个扩展了 jQuery 功能的开源库,提供了...
**jQuery.form.js插件详解与应用** jQuery.form.js是一款基于jQuery库的插件,它为开发者提供了方便、灵活的表单处理功能,尤其在异步(AJAX)提交表单方面表现出色。这款插件使得在网页上实现无刷新的文件上传和...
jQuery-form 是一个强大的jQuery插件,专门用于处理HTML表单的提交、上传和Ajax交互,大大简化了前端开发者与服务器端进行数据交换的过程。这个插件使得动态表单的创建和管理变得更加简单,同时提供了丰富的功能,如...
**jQuery和jQuery Form插件详解** 在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画以及Ajax交互等任务。jQuery的简洁语法和丰富的插件生态系统使得它成为开发者们的首选...
在这个主题中,我们将详细讨论如何利用Struts2和jQuery的form插件来实现这一功能。 首先,Struts2是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它简化了开发过程,提供了强大的拦截器机制和结果...
综上所述,jQuery UI和jQuery Form插件是前端开发的强大工具,它们能够轻松创建美观且交互性强的UI和处理复杂的表单逻辑。结合提供的帮助文档,开发者可以快速上手,提升项目质量,为用户提供更优质的Web体验。
jQuery Form插件由Malsup开发,是一款非常实用的jQuery扩展,能够极大地简化表单的Ajax提交过程。它不仅提供了一套完整的API来管理表单数据,还支持复杂的表单验证与文件上传等功能。 ##### 2.1 主要特性 - **Ajax...
- **文件上传**:对于文件上传的支持是jQuery Form插件的一个亮点,可以在配置选项中设置`url`、`type`等属性。 - **动态表单**:对于动态生成的表单元素,确保在DOM变动后重新绑定事件。 #### 六、参考资料 - **...
要使用jQuery Form插件,首先需要在页面中引入jQuery库和jQuery Form插件的脚本文件。然后,选择要操作的表单元素,调用`.ajaxForm()`或`.ajaxSubmit()`方法进行初始化。例如: ```html <script src="https://code....