angular-file-upload+springMVC的使用
最近项目中需要用到文件上传,使用了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, wherefiles
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, wherevalue
is{FileItem}
or index of item. 上传项,value
可以是{FileItem}
或者项的序号 - cancelItem
function(value) {
: Cancels uploading of item, wherevalue
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
在页面导入js
<script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script>
加入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(); }
}])
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没有值,后台就获取不到其他数据了。
如果失败的话可以调用onBeforeUploadItem function(item)这个方法,给formData重新赋值,达到修改的目的。如下:
uploader.onBeforeUploadItem function(item){
formData:“最终需要传递的值”
}
angular-file-upload+springMVC的使用的更多相关文章
- angularjs file upload插件使用总结
之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的 ...
- html5 file upload and form data by ajax
html5 file upload and form data by ajax 最近接了一个小活,在短时间内实现一个活动报名页面,其中遇到了文件上传. 我预期的效果是一次ajax post请求,然后在 ...
- Angular2 File Upload
Angular2 File Upload Install Install the components npm install ng2-file-upload --save github: https ...
- Spring MVC-表单(Form)标签-文件上传(File Upload)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...
- [AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor
The upload class will be used in the service layer. Notice it has a constructor for file attribute, ...
- jquery file upload示例
原文链接:http://blog.csdn.net/qq_37936542/article/details/79258158 jquery file upload是一款实用的上传文件插件,项目中刚好用 ...
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- jQuery File Upload done函数没有返回
最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...
- kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
- 【转发】Html5 File Upload with Progress
Html5 File Upload with Progress Posted by Shiv Kumar on 25th September, 2010Senior Sof ...
随机推荐
- Hadoop将本地文件复制到Hadoop文件系统
代码: package com.hadoop; import java.io.BufferedInputStream; import java.io.FileInputStream; import j ...
- windows下python的安装
首先进入python的官方网站:http://www.python.org在下载处,我们找到windows下有两个版本,下载最新版本Python3.4.0
- 哞哞快的 C# 高斯模糊实现
冲动来自于 bing best 这个小工具,非常短小精干,里边的设置界面非常精美而且背景是一张模糊效果的图片,十分养眼,遂想,收集一下实现方式放到类库里以后肯定用得上.一通百度.谷歌.博客园,换了好多 ...
- ios学习笔记之UIViewControl生命周期
提到UIViewcontrol,每个人都不会陌生吧!平时实际开发中,每天的实际开发应该都少不了它.学过android的各位亲,也对生命周期这四个字并不陌生,无论是activity,还是service, ...
- 为什么不能在子类或外部发布C#事件
为什么不能在子类或外部发布C#事件 背景 一个朋友问了一个问题:“为什么不能在子类或外部发布C#事件?”,我说我不知道,要看看生产的IL代码,下面我们看看. 测试 代码 1 using System; ...
- 关于default的位置问题:default放在前面
在linux内核的文件系统中,有这样的一段代码: 473 if (this.name[0] == '.') switch (this.len) { 474 default: 475 break; 47 ...
- 关于iOS 5 Could not instantiate class named NSLayoutConstraint错误
因为使用Xcode 4.6.2,新建工程的时候SDK 6.1,但是要做低版本适配.在将iOS模拟器选为5.0编译运行时候出现Could not instantiate class named NSLa ...
- JAVA的abstract修饰符 && 接口interface用法 && 抽象类和interface的差别
abstract修饰符可以修饰类和方法. (1)abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型(见后面实例),也就是编译时类型.抽象类就相当于 ...
- lua读书笔记
接下来把我所看的<Lua程序设计>中介绍lua的内容,时时的记录下来.当做一个读书笔记吧. 先说一下怎样直接运行lua文件吧,windows cmd进入相应的文件夹,然后输入lua,出现版 ...
- Chrome使用小技巧-多用户登录、直接打开隐身模式窗口
在开发过程中,有时候需要打开2个chrome,各自登录一个账号来做测试,正常情况下由于同一用户下的chrome共享cookies的原因,是没办法登录2个账号的. 这种情况,可以找到chrome图标,点 ...