异步上传文件

通过iframe来实现无刷新的的文件上传,其实是有刷新的,只是在iframe里面隐藏了而已

 

简单的原理说明:

<form id="form1" method="post" action="upload.do" enctype="multipart/form-data"  target="uploadframe" >
<input type="file" id="upload" name="文件上传" />
</form>
<iframe id="uploadframe" name="result_frame"   style="visibility:hidden;"></iframe>

 

 

form里面的target要与iframe里面的id的值相等,指示是form相应了post事件,也就是post时间相应的时候刷新的是iframe而不是整个页面

 

下面我举个例子:

1、编写一个JSP页面

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>

	<form method="post" enctype="multipart/form-data">
		用户名: <input type="text" name="username" /><br /> 上传头像: <input
			type="file" name="uploadphoto" onchange="startUpload(this.form)" />
		<iframe style="display: none" mce_style="display:none"
			name="uploadframe"></iframe>
		<input type="hidden" id="photo" name="photo" value="" />
		<div id="displayphoto"></div>
		<input type="submit" name="submitted" value="提交"
			onclick="formSubmit(this.form)" />
	</form>

</body>
</html>

<script type="text/javascript">

//选择了文件后开始异步上传  
function startUpload(oForm) {  
    document.getElementById('displayphoto').innerHTML = 'Loading...';  
    oForm.action = '../user/upload.do';  
    oForm.target = 'uploadframe';  
    oForm.submit();  
}  


//整个页面的提交  
function formSubmit(oForm) {  
    oForm.action = document.URL;  
    oForm.target = '_self';  
    oForm.submit();  
} 

</script>

 

2、编写对应的action

@RequestMapping(value = "/upload")
	public void uploadAction(MultipartHttpServletRequest multipartRequest) {

        try {  
            
            MultipartFile file = multipartRequest.getFile("myfilename");   // 获得文件   和 jsp 的 <input name对应>
            String filename = file.getOriginalFilename();       // 获得文件名
			InputStream fin = file.getInputStream();// 获得输入流
			
			String uploadPath = "D:\\uploads\\";
				if(!new File(uploadPath).isDirectory()){
					new File(uploadPath).mkdirs();   
				}   
				File f2 = new File(uploadPath, filename);//创建d盘
				if(!f2.exists()){
					f2.createNewFile();
				}
				
				FileOutputStream fout = new FileOutputStream(f2);
				byte[] b = new byte[1024];
				int length = 0;
				while((length = fin.read(b)) != -1){
					fout.write(b, 0, length);
				}
			
				if(fin !=null){
					fin.close();
				}
				if(fout!=null){
					fout.close();
				}
			
		} catch (FileNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}    
      
	}

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐
  • —软件人才免语言低担保 赴美带薪读研!—



你可能感兴趣的:(异步,上传,文件)