jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。
下面是一个简单的案例:
1.导入js
<script src="<%=basePath%>js/jquery.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.form.js"></script>
2.建立一个from表单
//图片显示
<div style=" width:120px; height:120px;">
<img id="ImgPr" width="120" height="120" src="" />
</div>
//from表单
<form id="picForm" name="picForm" action="fileAction!uploadFile.action" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file" οnchange="updataFile();" size="30"/>
<input type="submit" value="上传"/>
</form>
3.javaScript 脚本
<script language="javascript">
$(function(){
// 为表单绑定异步上传的事件
$("#picForm").ajaxForm({
url : "fileAction!uploadFile.action", // 请求的url
type : "post", // 请求方式
dataType : "json", // 响应的数据类型
async :true, // 异步
success : function(data){
$("#ImgPr").attr("src", data.fileID);
},
error : function(){
alert("数据加载失败!");
}
});
});
//选择图片后无需点击上传,直接上传图片
function updataFile(){
// 提交表单
$("#picForm").ajaxSubmit({
url : "fileAction!uploadFile.action", // 请求的url
type : "post", // 请求方式
dataType : "json", // 响应的数据类型
async :true, // 异步
success: function (data) {
$("#ImgPr").attr("src", data.fileID);
},
error : function(){
alert("数据加载失败!");
}
});
}
</script>
4.struts配置:
<action name="fileAction" class="com.transn.wmt365.usercenter.action.FileUploadAction" />
5.java后台处理部分就不写了。每个人的实现都不相同
关于JS的貌似没有上传的地方。这个是下载地址http://download.csdn.net/detail/king841021/8009647