文档章节

AngularJS实现文件异步上传

柳絮飞祭奠
 柳絮飞祭奠
发布于 2017/06/30 13:42
字数 670
阅读 9
收藏 0
点赞 0
评论 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
博文 10
码字总数 2693
作品 0
合川
Angular项目构建指南 - 不再为angular构建而犹豫不决

前言 接触Angular也有小半个月了,虽然没有使劲折腾,不过正所谓"no zuo no die".学一门新东西,不好好折腾一下总觉得对不起祖国,最不起人民...好像扯远了,想写前言来着.为什么要写这篇构建指南...

顽Shi
2014/06/16
0
16
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
ngular2 VS Angular4 深度对比:特性、性能

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

机器的心脏
06/02
0
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
05/08
0
0
读书笔记“使用AngularJs开发下一代web应用”

国内一个挺好的读书笔记 http://www.sunzhongwei.com/angularjs.html 源码下载地址https://github.com/shyamseshadri/angularjs-book Angular SEO http://www.yearofmoo.com/2012/11/angula......

lilugirl
2014/01/06
0
0
Angular 6.0 即将发布,承诺更小更快更易用

本月早些时候,Angular 团队发布了 6.0 的第五版候选版本,其中包括一些错误修复以及添加令牌标记和支持配置导航网址。 根据 Angular 的开发者支持者 Stephen Fluin 的说法,RC 意味着团队已...

达尔文
04/24
0
0
AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名
05/15
0
0
AngularJS应用开发思维之1:声明式界面

这篇博客之前承接上一篇:http://www.cnblogs.com/xuema/p/4335180.html 重写示例:模板、指令和视图 AngularJS最显著的特点是用静态的HTML文档,就可以生成具有动态行为的页面。 还是前面的...

笔阁
2015/03/16
0
0
我们为什么以及是如何从Angular.js 迁移到 Vue.js?

一些背景介绍 我们的应用程序(Holistics.io )是一个基于 SQL的商业智能(BI)平台,使用Rails、Sidekiq、PostgreSQL和AngularJS编写。我们的Rails应用程序始于2013年底,作为一个简单的应用...

燕儿199606
06/14
0
0
5-XHRs(XmlHttpRequest)与依赖注入

足以给应用绑定了硬编码数据集中的三条手机数据,让我们从我们的服务中适配更大的数据集,他使用Angular内建的服务中$htttp。我们将使用Angular的依赖注入给提供服务。 现在有20条手机,从服...

奋斗到天明
2015/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

毕业5年,我是怎么成为年薪30W的运维工程师

#转载# 我在大学读的是计算机专业,但大学毕业之后,进入到一家私企进行工作,工作的内容类似于网管,会经常的去修电脑,去做水晶头等内容。刚开始工作,也没想太多,最想的是丰富自己的工作...

Py爱好
7分钟前
0
0
大数据基础知识,大数据学习,涉及的知识点

一、什么是大数据 一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合,具有海量的数据规模、快速的数据流 转、多样的数据类型和价值密度低四大特征。...

董黎明
23分钟前
0
0
Linux CentOS 7上安装极点五笔

话说几天前在新买的惠普笔记本上成功地安装了Linux CentOS 7操作系统、Nvidia Quandro P600驱动程序及X Window,并在VMware下安装Red Hat教学环境,彻底跳出Windows的苦海,但仍然有一件事不...

大别阿郎
35分钟前
7
0
2018年7月20日集群课程

一、集群介绍 集群,简单地说是指一组(若干个)相互独立的计算机,利用高速通信网络组成一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服务器。 ...

人在艹木中
38分钟前
0
0
spark开发机中调试snappy

目的 在Idea中的点击运行,使spark可以直接读取snappy 自己编译hadoop,以支持snappy的压缩。 自己编译的目的就是要得到支持snappy文件读写的动态链接库。如果可以在网上下载,可以跳过自行编...

benny周
55分钟前
0
0
centos7 安装docker

1,查看系统版本 cat /etc/redhat-release 2,安装gcc yum -y install gccyum -y install gcc-c++ 3,卸载旧版本 yum remove docker \ docker-client \ ......

暗中观察
56分钟前
0
0
rabbitmq学习记录(七)交换机Exchange-topic

实现功能:一条消息发送给多个消费者 交换机模式:topic 相比于direct匹配模式,匹配routingKey时,topic模式下不仅支持完全匹配,还支持两种特殊的匹配方式 #:可以匹配一个或多个字符 *:可...

人觉非常君
56分钟前
0
0
[译]为什么(要使用)GNU Affero GPL?

#为什么(要使用)GNU Affero GPL? 作者信息:Copyright © 2010, 2013, 2014, 2015 Free Software Foundation, Inc. This page is licensed under a Creative Commons Attribution-NoDeriv......

ICE冰焰火灵X
57分钟前
0
0
apollox-lua 示例

这个项目是从openn2o里迁出的项目。 示例地址 apollox-lua.js 是把js翻译成lua的库。支持两种不同的模态, 在编译工程的时候使用 可以用作openresty的代码翻译, 即用js代替lua。在web模式可...

钟元OSS
今天
0
0
Ubuntu系统笔记 Linux系统

Ubuntu 16.04.3 Ubuntu系统,不适用yum, yum软件源都是RPM软件包,不是deb格式软件包,所以你即便是在Ubuntu上面安装了yum,也是完全用不了的。 不推荐 apt好于yum apt install screen...

阿锋zxf
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部