文档章节

angular-file-upload+springMVC的使用

孟飞阳
 孟飞阳
发布于 2017/07/17 14:27
字数 1231
阅读 59
收藏 0

最近项目中需要用到文件上传,使用了angular-file-upload插件完成

首先来介绍下这个插件的一些属性(参考官方文档)

FileUploader

属性

  • url {String}: 上传文件的服务器路径
  • alias {String}:  包含文件的名称,默认是file
  • queue {Array}: 上传队列
  • progress {Number}: 上传队列的进度,只读
  • headers {Object}: 上传的头文件信息, 浏览器需支持HTML5
  • formData {Array}: 与文件一起发送的表单数据
  • filters {Array}: 在文件加入上传队列之前应用过滤器.,如果过滤器返回true则文件加入队列中
  • autoUpload {Boolean}: 文件加入队列之后自动上传,默认是false
  • method {String}: 请求方式,默认是POST,浏览器需支持HTML5
  • removeAfterUpload {Boolean}: 文件上传成功之后从队列移除,默认是false
  • isHTML5 {Boolean}: 如果浏览器支持HTML5上传则返回true,只读
  • isUploading {Boolean}: 文件正在上传中返回true,只读
  • queueLimit {Number} : 最大上传文件数量(预定义)
  • withCredentials {Boolean} : 使用CORS,默认是false, 浏览器需支持HTML5

方法

  • addToQueue function(files[, options[, filters]]) {: Add items to the queue, where files is a {FileList|File|HTMLInputElement}options is an {Object} andfilters is a {String}.  添加项到上传队列中,files 是 {FileList|File|HTMLInputElement}, options 是 {Object} 以及 filters 是 {String}
  • removeFromQueue function(value) {: Remove an item from the queue, wherevalue is {FileItem} or index of item.  从上传队列移除项,value 可以是 {FileItem} 或者项的序号
  • clearQueue function() {: Removes all elements from the queue.  移除上传队列所有的元素
  • uploadItem function(value) {: Uploads an item, where value is {FileItem} or index of item.  上传项, value 可以是 {FileItem} 或者项的序号
  • cancelItem function(value) {: Cancels uploading of item, where value is{FileItem} or index of item.  取消上传的项
  • uploadAll function() {: Upload all pending items on the queue.  将上传队列中所有的项进行上传
  • cancelAll function() {: Cancels all current uploads.  取消所有当前上传
  • destroy function() {: Destroys a uploader. 
  • isFile function(value) {return {Boolean};}: Returns true if value is {File}
  • isFileLikeObject function(value) {return {Boolean};}: Returns true if value is{FileLikeObject}.
  • getIndexOfItem function({FileItem}) {return {Number};}: Returns the index of the{FileItem} queue element.  返回项在上传队列中的序号
  • getReadyItems function() {return {Array.<FileItems>};}: Return items are ready to upload.  返回准备上传的项
  • getNotUploadedItems function() {return {Array.<FileItems>};}: Return an array of all pending items on the queue  返回上传队列中未上传的项

回调函数

  • onAfterAddingFile function(item) {: 添加文件到上传队列后
  • onWhenAddingFileFailed function(item, filter, options) {: 添加文件到上传队列失败后
  • onAfterAddingAll function(addedItems) {: 添加所选的所有文件到上传队列后
  • onBeforeUploadItem function(item) {: 文件上传之前
  • onProgressItem function(item, progress) {: 文件上传中
  • onSuccessItem function(item, response, status, headers) {: 文件上传成功后
  • onErrorItem function(item, response, status, headers) {: 文件上传失败后
  • onCancelItem function(item, response, status, headers) { - 文件上传取消后
  • onCompleteItem function(item, response, status, headers) {: 文件上传完成后
  • onProgressAll function(progress) {: 上传队列的所有文件上传中
  • onCompleteAll function() {: 上传队列的所有文件上传完成后

使用

当然首先需要加入插件的js

bower

bower install angular-file-upload

<script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script> 

在页面导入js

加入angularFileUpload
var myapp = angular.module('add',['angularFileUpload'])

 html

我这里是上传的图片所以代码如下:

<div ng-controller="addProduct">
<div>
   <lable>产品名称</lable>
   <input type="text" ng-model="productInfo.name">
</div>
<div>
<lable>产品型号</lable>
 <input type="text" ng-model="productInfo.type">
</div>
<div>
<lable>产品图片</lable>
<input type="file" name="photo" nv-file-select=""  uploader="uploader" accept="image/*" ngf-max-size="2MB" ngf-model-invalid="errorFile" /></div>
<div><button class="btn btn-info" ng-click="addProduct()"></div>
</div>

这个是最简单的使用主要是uploader这个属性,其他的accept、ngf-max-size、ngf-model-invalid都是一些限制图片的属性

Js

myapp.controller('addProduct',['$scope','$http','FileUploader',function($scope,$http,FileUploader){
         
//在外围定义一个数组,赋值给formData,通过改变此数组,实现数据的改变
         var productInfo=[];
         var uploader = $scope.uploader = new FileUploader({
            url: 'add',
            formData:productInfo
        });
          uploader.onSuccessItem = function(fileItem, response, status,  headers) {             
                 alert(response);   
         };
           $scope.addProduct = function() {
            uploader.uploadAll();
            
        }

	// FILTERS

	uploader.filters.push({
		name: 'customFilter',
		fn: function(item /*{File|FileLikeObject}*/, options) {
			return this.queue.length < 10;
		}
	});

	// CALLBACKS

	uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
		console.info('onWhenAddingFileFailed', item, filter, options);
	};
	uploader.onAfterAddingFile = function(fileItem) {
		console.info('onAfterAddingFile', fileItem);
	};
	uploader.onAfterAddingAll = function(addedFileItems) {
		console.info('onAfterAddingAll', addedFileItems);
	};
	uploader.onBeforeUploadItem = function(item) {
		console.info('onBeforeUploadItem', item);
	};
	uploader.onProgressItem = function(fileItem, progress) {
		console.info('onProgressItem', fileItem, progress);
	};
	uploader.onProgressAll = function(progress) {
		console.info('onProgressAll', progress);
	};
	uploader.onSuccessItem = function(fileItem, response, status, headers) {
		console.info('onSuccessItem', fileItem, response, status, headers);
	};
	uploader.onErrorItem = function(fileItem, response, status, headers) {
		console.info('onErrorItem', fileItem, response, status, headers);
	};
	uploader.onCancelItem = function(fileItem, response, status, headers) {
		console.info('onCancelItem', fileItem, response, status, headers);
	};
	uploader.onCompleteItem = function(fileItem, response, status, headers) {
		console.info('onCompleteItem', fileItem, response, status, headers);
	};
	uploader.onCompleteAll = function() {
		console.info('onCompleteAll');
	};

	console.info('uploader', uploader);

}])

java

@RequestMapping(value="add",method = RequestMethod.POST)
    public ResponseEntity<Object> addProduct(@RequestParam("file") MultipartFile uploadFiles,ProductVo productVo){

        String fileName=uploadFile.getOriginalFilename();
        String prefix="."+fileName.substring(fileName.lastIndexOf(".")+1);
        File dst=null;
        try {
            String root = System.getProperty("catalina.base");    //获取tomcat根路径
            File uploadDir = new File(root, "webapps/upload");    //创建一个指向tomcat/webapps/upload目录的对象
            if (!uploadDir.exists()) {
                uploadDir.mkdir();                                //如果不存在则创建upload目录
            }
            dst = new File(uploadDir, 
                    UUID.randomUUID().toString()+prefix);                //创建一个指向upload目录下的文件对象,文件名随机生成    
            uploadFile.transferTo(dst);                            //创建文件并将上传文件复制过去
        } catch (Exception e) {
            e.printStackTrace();
        }
      //然后把路径set到productVo中 完成添加 "/upload/"+dst.getName();

}

如此就完成了。

主要问题

在Js中给formData赋值 因为formData的new生成的所以 就是固定不变的,如果直接写formData:[$scope.prodctInfo],就会导致formData没有值,后台就获取不到其他数据了。

本文转载自:http://www.cnblogs.com/wangzun/p/6099884.html

孟飞阳
粉丝 212
博文 1011
码字总数 552670
作品 5
朝阳
个人站长
私信 提问
$apply already in progress at Error

Search: Sort by: name age {{phone.name}} {{phone.snippet}} {{phone.age}} XMLHttpRequest cannot load file:///D:/ProgramFilesZhtt/tomcat1081/webapps/AngularJS/js/05.json. Cross or......

梦幻女侠
2013/10/11
1K
1
OSChina 技术专题之 AngularJS 更新版(201412)

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

OSC编辑部
2014/10/17
11.1K
26
《AngularJS学习整理》系列分享专栏

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

开元中国2015
2018/11/09
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
Angular 2.0 调查:43% 选择 Webstorm 编辑器

这是 Jeff Whelpley 和 Patrick Stapleton 发布的博客,他们并不是全职的 Angular 团队成员,是 Angular 社区值得称赞的贡献者。本文是对所有用户都想知道的,关于 Angular 的一些总结。 几周...

oschina
2015/09/03
8.5K
14

没有更多内容

加载失败,请刷新页面

加载更多

android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
9分钟前
0
0
java 序列化和反序列化

1. 概述 序列恢复为Java对象的过程。 对象的序列化主要有两 首先我们介绍下序列化和反序列化的概念: 序列化:把Java对象转换为字节序列的过程。 反序列化:把字节序列恢复为Java对象的过程。...

edison_kwok
20分钟前
0
0
分布式数据一致性

狼王黄师傅
今天
1
0
经验

相信每位开发者在自己开发的过程中,都会反思一些问题,比如怎样提高编程能力、如何保持心态不砍产品经理、996 之后怎样恢复精力……最近开发者 Tomasz Łakomy 将他 7 年的开发生涯中学习到...

WinkJie
今天
4
0
从源码的角度来看SpringMVC

SpringMVC核心流程图 简单总结 首先请求进入DispatcherServlet 由DispatcherServlet 从HandlerMappings中提取对应的Handler 此时只是获取到了对应的Handle,然后得去寻找对应的适配器,即:H...

骚年锦时
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部