关于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