jquery + struts2 实现异步上传文件

struts2上传文件是通过提交form表单的方式实现的,如果需要实现异步上传文件的话 ,就需要借助jquery的异步提交表单的功能了,要用到jquery.form.js文件。

首先要加载相关js文件:

	<script language="JavaScript" src="<%=request.getContextPath()%>/jq/jquery-1.8.3.js"></script>
	<script language="JavaScript" src="<%=request.getContextPath()%>/jq/jquery.form.js"></script>

form标签:

<form  id="upload" action="./admin/score/upload.do" method="post" enctype="multipart/form-data" >
     
	<div style="margin:30px 0px 0px 0px;">
     	<table>
     		<tr >
     			<td><label class="forminfo">上传文件:</label></td>
     			<td><input id="file" type="file" name="file" style="border: thin solid #CCCCCC;"/></td>
     			<td><input type="submit" value="提交文件" style="height:25px;width:80px;"/></td>
     		</tr>
     	</table>
     </form>

jquery代码:

$(function(){

     $("#upload").submit(function(){
			
			
					var first = $("#first").val();
					var second = $("#second").val();
					var third = $("#third").val();
					
					$(this).ajaxSubmit({
					data: {first:first,second:second,third:third },	
                                        dataType: "json",			
					resetForm: true,		    	 
					success: function(data) { 
			                      if(data.result != null){
			               		//根据返回信息,更新提示窗口内容
			               		$("#result").html(data.result);
			               		//显示提示窗口
						$(".tip").fadeIn(200);
			               }
			            }
			       
			        });
				}

				return false;
			});
		});

 解析:

首先获取表单的submit事件,然后在事件里调用ajaxSubmit方法,即能异步提交表单。

在方法中可以声明若干参数,按需选择

url      提交表单数据的URL

type   提交表单数据的方法get 或 post

data   需要提交的参数键值对列表

datatype   声明返回的数据类型,有xml 、json、script 三种,如果返回类型与声明的不同,则回调函数无法执行

resetForm  如果为true 则成功后重置form 表单

success   成功后的回调函数,执行成功后的操作。在我的例子里,根据返回的信息更新提示窗口的内容,然后显示提示窗口

最后执行完ajaxSubmit方法后,则需要return false ,以阻止页面中的form表单提交。

Action类中要声明对应的文件、文件名、文件类型,并有相应get 和set方法

	private File file;
	private String fileFileName;
	private String fileContentType;

 

最后是Action方法:

public String upload() throws FileNotFoundException{
		//获取项目上中指定的保存上传文件的文件夹路径
		String path = ServletActionContext.getServletContext().getRealPath("/upload");

		//打开上传文件输入流
		FileInputStream fis = new FileInputStream(file);
		//打开目标文件夹输出流
		FileOutputStream fos = new FileOutputStream(new File(path,fileFileName));
		
		//输入流转成字节,并用输出流写入文件
		byte[] b = new byte[1024];
		int length = 0;
		try {
			while((length = fis.read(b))!=-1){
				fos.write(b,0,b.length);   //写入文件
			}
			fis.close();
			fos.close();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		
		return SUCCESS;
	}

 

好了,文件异步上传步骤大概就是如此,希望能给学习者有一个合理的参考。

猜你喜欢

转载自max1487.iteye.com/blog/2308358
今日推荐