文档章节

AngularJS实现文件异步上传

柳絮飞祭奠
 柳絮飞祭奠
发布于 2017/06/30 13:42
字数 670
阅读 11
收藏 0
                                    第一篇博客直接开门见山了。。。。。。。。。

实现:前端AngularJs+后端servelt

依赖包:commons-fileupload.x.x.jar commons-io-x.x.jar

下载: http://commons.apache.org/proper/commons-fileupload/
http://commons.apache.org/proper/commons-io/ 文件上传前端利用AngularJs封好的http发起异步请求传递二进制文件。 代码: 第一步:

	<div class="row " ng-show="up_doc">
			<div class="col-md-12 col-sm-12">
				<div class="z_up_common">
					<div class="z_up_common_inner">
						<div class="z_up_image">
							<input id="file"
								onchange="angular.element(this).scope().file_up_onclick(this)"
								type="file"> </input>
						</div>
					</div>
					<p class="up-tips">从我的电脑选择要上传的文档:按住CTRL可以上传多份文档</p>
				</div>
			</div>
		</div>

输入图片说明 第二步:点击上传文档按钮确认选中文档开始上传

 触发 file_up_onclick事件调用js方法
        $scope.file_up_onclick=function(){
	    //1.获取文件对象
		var _file=document.getElementById("file");
	    //2.实例化FormData对象
                   var $$fd=new FormData();
            //3.添加文件对象到FormData中
		$$fd.append("file",_file.files[0]);
            //4.开始异步上传
		$http({
			method:'post',
			data: $$fd,
			url:'//servlet/FileCommand',
			headers: {'Content-Type':undefined},
 			/*序列化 formdata object*/
  			transformRequest: angular.identity 		
		}).success(function(data){	
		});
	};

第四步:servelt接收二进制文件 public class FileCommand extends HttpServlet{

	// 1.文件上传路径
	private static final String UPLOAD_DIRECTORY = "D:/文件上传";
	// 2.设置临时存储文件大小,当超过大小时,将先存储超出大小文件在临时目录
	private static final int MEMORY_THRESHOLD = 1024 * 1024 * 30; 
	// 3.设置最大文件上传值
	private static final int MAX_FILE_SIZE = 1024 * 1024 * 2000; 
	// 4.最大请求值
	private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 2048; 
	
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

  doPost(request, response);
}

/**
 * @摘要 提供文件上传的方法
 */
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
	//1.设置字符编码为utf-8
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	response.setContentType("text/html;charset=utf-8");
	// 2.检测是否为多媒体上传
	if (!ServletFileUpload.isMultipartContent(request)) {
		// 2.1如果不是则停止
		PrintWriter writer = response.getWriter();
		writer.println("Error: 表单必须包含 enctype=multipart/form-data");
		writer.flush();
		return  ;
	}
	// 3.配置上传参数
	DiskFileItemFactory factory = new DiskFileItemFactory();
	//4. 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
	factory.setSizeThreshold(MEMORY_THRESHOLD);
	// 5.设置临时存储目录 java.io.tmpdir默认的临时文件路径为服务器的temp目录
	factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

	ServletFileUpload upload = new ServletFileUpload(factory);

	// 6.设置最大文件上传值
	upload.setFileSizeMax(MAX_FILE_SIZE);

	// 7.设置最大请求值 (包含文件和表单数据)
	upload.setSizeMax(MAX_REQUEST_SIZE);

	//8. 如果目录不存在则创建
	File uploadDir = new File(UPLOAD_DIRECTORY);
	if (!uploadDir.exists()) {
		uploadDir.mkdir();
	}
	try {
		// 10.解析请求的内容提取文件数据
		List<FileItem> formItems = upload.parseRequest(request);
		System.out.println("name="+request.getSession().getAttribute("name"));
			// 10.1迭代表单数据
		if (formItems != null && formItems.size() > 0) {
			for (FileItem item : formItems) {
				if (!item.isFormField()){
					String nFileName = new File(item.getName()).getName();
					
					String nPrefix=nFileName.substring(nFileName.lastIndexOf(".")+1);
			       
					nFileName=nFileName.substring(0,nFileName.lastIndexOf("."))	;				
					
					item.write(new File(UPLOAD_DIRECTORY+"/"+nFileName));
					
					item.delete();
					
			        PrintWriter nWriter=response.getWriter();
			        
			        nWriter.print("{\"prefix\":\""+nPrefix+"\",\"filename\":\""+nFileName+"\",\"filesize\":\""+item.getSize()+"\"}");
                }
				}
			}  
	} catch (Exception ex) {
		PrintWriter writer=response.getWriter();
		writer.print("error");
	}

}

第五步:查看文件是否在指定目录即可

© 著作权归作者所有

柳絮飞祭奠
粉丝 0
博文 11
码字总数 2890
作品 0
合川
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
使用 ng-packagr 打包 Angular

写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的...

卡色
2018/09/29
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
165
0
试读angular源码第二章:引导模块bootstrapModule

前言 今天 angularv8的正式版发了,但是除了动态路由那里没觉得有啥大变化,有点小失望 承接上一章 项目地址 文章地址 angular 版本:8.0.0-rc.4 欢迎看看我的类angular框架 引导模块 Angula...

全菜工程师
05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅谈java过滤器Filter

一、简介 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码、做一些业务逻辑判断如是否有权限访问页面等。其工作原理是,只要你在web.xml...

青衣霓裳
27分钟前
3
0
技术产品研发型企业的发展困境

目前中小企业想要发展自己的业务,必须使用到底层架构技术,于是企业多采用三种技术方案,一、招相关技术人员,并为之长期投入技术成本;二、使用相关开源技术框架,并培养相关业务人员;三、...

数蚕
51分钟前
5
0
《2019网络安全行业人才发展研究报告》出炉

随着大安全时代的到来,网络安全已经从虚拟空间延伸到现实空间。当今网络战愈演愈烈,网络军备赛即将来临。网络空间领域的战争归根到底还是人才的竞争。面对新形势,建立高效的网络安全人才培...

360网络安全大学
53分钟前
3
0
酒德利商城开发程序逻辑

<textarea name="Content" rows="2" cols="20" id="Content" class="t14" style="font-family:宋体;font-size:10.5pt;"></textarea> 酒德利商城开发zhao·I5OI3I5I74O微/电,酒德利批发零售,......

洋哥说
今天
2
0
十款强大的IDEA插件-Java开发者的利器

xl_echo编辑整理,欢迎转载,转载请声明文章来源。欢迎添加echo微信(微信号:t2421499075)交流学习。 百战不败,依不自称常胜,百败不颓,依能奋力前行。——这才是真正的堪称强大!! 插件一...

xlecho
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部