关于formData方式ajax上传文件的方式在笔者随笔开发日记5-18中有描述,在此不做记录.
由于之前使用的是formData方式上传文件,但是在后期处理浏览器兼容问题的时候出现头痛的事情,formData的写法中有一句话
var formData = new FormData($("#add-documentForm")[0]);
结果在IE下出现FormData未定义的问题,于是改用了jqueryForm进行ajax文件上传
有两种方式: ajaxForm:在界面加载完成的时候绑定到form表单上,当form表单提交时就是ajax提交
ajaxSubmit :手动调用插件的ajax提交，可以在form提交的时候触发ajaxSubmit，也可以在一个button的click事件里面触发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%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<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").submit(function(){
$('#myForm').ajaxSubmit({
beforeSubmit:handleBeforeSubmit,
success:handleSuccess
});
//记得返回false，阻止页面的默认提交行为
return false;
});
});
/**
* 提交请求发出之前的处理
*/
function handleBeforeSubmit(){
console.info('提交请求发出之前的处理')
}
/**
* 上传成功后的处理
*/
function handleSuccess(){
console.info('上传成功后的处理')
alert('上传成功 !');
}
/**
* ajaxForm方式,在页面加载完成时绑定到form表单上
*
*/
$(document).ready(function() {
$('#myForm').ajaxForm({
beforeSubmit:handleBeforeSubmit,
success:handleSuccess
});
});
</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>
在引入js文件时候,注意先引入jquery文件 再引入jquery-form.js