异步上传文件

标签: 异步 上传 文件 | 发表时间:2014-01-13 10:26 | 作者:hbiao68
出处:http://www.iteye.com

通过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推荐



相关 [异步 上传 文件] 推荐:

异步上传文件

- - Web前端 - ITeye博客
通过iframe来实现无刷新的的文件上传,其实是有刷新的,只是在iframe里面隐藏了而已. form里面的target要与iframe里面的id的值相等,指示是form相应了post事件,也就是post时间相应的时候刷新的是iframe而不是整个页面. 用户名: <input type="text" name="username" /><br /> 上传头像: <input.

多文件上传

- - BlogJava-首页技术区
多文件上传 jquery的插件. 使用的方法  导入 jquery.js 及 jquery.MultiFile.js ,. 方式一: 后台是文件数组  .  private File[] upload; // 与jsp表单中的名称对应. 在 form 中加入 <input type="file" name="upload[]" class="multi" /> 即可.

yepnope.js – 异步加载资源文件

- Allen - 某人的栖息地
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. 当Modernizr.geolocation为真时,加载yep项也就是”normal.js”,否则加载nope项——可以同时加载多个文件. yepnope和现有的xxx script loader有什么区别.

dubbo处理文件上传

- - 开源软件 - ITeye博客
dubbo和hessian的maven依赖:. 服务提供者(项目名称:provider). 首先是web.xml配置(使用spring):. 最重要的applicationContext.xml :. 参考: dubbo hessian协议. <!-- 提供方应用信息,用于计算依赖关系 -->.

springmvc文件上传下载

- - ITeye博客
在网上搜索的代码 参考整理了一份. commons-fileupload.jar与commons-io-1.4.jar二个文件. 1、表单属性为: enctype="multipart/form-data". 2、springmvc配置. <!-- 设置上传文件的最大尺寸为10MB -->.

HTML5之拖拽上传文件及chrome下文件夹上传

- - ITeye博客
最近被安排做一个拖拽上传和文件夹上传的功能,不考虑兼容性,哈哈这个可以用HTML5实现. 这里就不仔细学习HTML5,我只是想找例子,然后偷过来用,至于原理边用边学. 首先这里有一个很好的实例实现拖拽上传: http://blogs.sitepointstatic.com/examples/tech/filedrag/1/index.html.

nodejs-post文件上传原理详解

- never-online - CNode社区
浅谈HTTP中Get与Post的区别. 其中请求报文中的开始行和首部行包含了常见的各种信息,比如http协议版本,方法(GET/POST),accept-language,cookie等等. 而’实体主体’一般在post中使用,比如我们用表单上传文件,文件数据就是在这个’实体主体’当中. 写这篇教程的起因是因为在学习nodejs的过程中,想要自己实现一些文件上传的功能,于是不得不去研究POST.

文件上传的渐进式增强

- - 阮一峰的网络日志
文件上传是最古老的互联网操作之一. 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳. 在这个新技术日新月异的时代,显得非常落伍. 网页开发者们想了很多办法,试图提升文件上传的功能和操作体验,在各种Javascript库的基础上,开发了五花八门的 插件. 可是,由于不同浏览器之间的差异,缺乏统一接口,这些插件要么用起来很麻烦,要么不能普遍适用.

html中input上传多个文件

- - CSDN博客Web前端推荐文章
如何使用html上传多个文件呢. 我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 不过有一个问题,只支持IE10+,连IE9都不支持,o(︶︿︶)o . 其实方法很简单<input type="file" name="upload">这样只能选择一个文件,<input type="file" multiple name="upload">这样就可以选择多个文件了,怎么样,很方便吧.

WebUploader 文件上传优化总结

- - FEX 百度 Web 前端研发部
前段时间在 w3ctech技术交流会中分享了 基于 HTML5 技术的文件上传组件,由于ppt携带的信息非常有限,故在此整理成文章分享出来,供感兴趣的同学阅读. 对于文件上传,相信还有不少同学还停留在FLASH时代,其实现在 HTML5 不仅可以实现文件上传,而且可以做得更好. 以下是对 HTML5 与 FLASH 就文件上传方面的功能调研测试得出的结果.