网址：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 是一个强大的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....
jQuery Form插件主要特性包括： 1. **Ajax表单提交**：它允许开发者在不刷新整个页面的情况下，异步提交表单数据到服务器。这提高了用户体验，因为用户可以继续与页面其他部分交互，而无需等待页面刷新完成。通过...