最近项目中需要用到文件上传,使用了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

 在页面导入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的使用的更多相关文章

  1. angularjs file upload插件使用总结

    之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的 ...

  2. html5 file upload and form data by ajax

    html5 file upload and form data by ajax 最近接了一个小活,在短时间内实现一个活动报名页面,其中遇到了文件上传. 我预期的效果是一次ajax post请求,然后在 ...

  3. Angular2 File Upload

    Angular2 File Upload Install Install the components npm install ng2-file-upload --save github: https ...

  4. Spring MVC-表单(Form)标签-文件上传(File Upload)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...

  5. [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, ...

  6. jquery file upload示例

    原文链接:http://blog.csdn.net/qq_37936542/article/details/79258158 jquery file upload是一款实用的上传文件插件,项目中刚好用 ...

  7. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  8. jQuery File Upload done函数没有返回

    最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...

  9. kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

    kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

  10. 【转发】Html5 File Upload with Progress

    Html5 File Upload with Progress               Posted by Shiv Kumar on 25th September, 2010Senior Sof ...

随机推荐

  1. Hadoop将本地文件复制到Hadoop文件系统

    代码: package com.hadoop; import java.io.BufferedInputStream; import java.io.FileInputStream; import j ...

  2. windows下python的安装

    首先进入python的官方网站:http://www.python.org在下载处,我们找到windows下有两个版本,下载最新版本Python3.4.0

  3. 哞哞快的 C# 高斯模糊实现

    冲动来自于 bing best 这个小工具,非常短小精干,里边的设置界面非常精美而且背景是一张模糊效果的图片,十分养眼,遂想,收集一下实现方式放到类库里以后肯定用得上.一通百度.谷歌.博客园,换了好多 ...

  4. ios学习笔记之UIViewControl生命周期

    提到UIViewcontrol,每个人都不会陌生吧!平时实际开发中,每天的实际开发应该都少不了它.学过android的各位亲,也对生命周期这四个字并不陌生,无论是activity,还是service, ...

  5. 为什么不能在子类或外部发布C#事件

    为什么不能在子类或外部发布C#事件 背景 一个朋友问了一个问题:“为什么不能在子类或外部发布C#事件?”,我说我不知道,要看看生产的IL代码,下面我们看看. 测试 代码 1 using System; ...

  6. 关于default的位置问题:default放在前面

    在linux内核的文件系统中,有这样的一段代码: 473 if (this.name[0] == '.') switch (this.len) { 474 default: 475 break; 47 ...

  7. 关于iOS 5 Could not instantiate class named NSLayoutConstraint错误

    因为使用Xcode 4.6.2,新建工程的时候SDK 6.1,但是要做低版本适配.在将iOS模拟器选为5.0编译运行时候出现Could not instantiate class named NSLa ...

  8. JAVA的abstract修饰符 && 接口interface用法 && 抽象类和interface的差别

    abstract修饰符可以修饰类和方法. (1)abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型(见后面实例),也就是编译时类型.抽象类就相当于 ...

  9. lua读书笔记

    接下来把我所看的<Lua程序设计>中介绍lua的内容,时时的记录下来.当做一个读书笔记吧. 先说一下怎样直接运行lua文件吧,windows cmd进入相应的文件夹,然后输入lua,出现版 ...

  10. Chrome使用小技巧-多用户登录、直接打开隐身模式窗口

    在开发过程中,有时候需要打开2个chrome,各自登录一个账号来做测试,正常情况下由于同一用户下的chrome共享cookies的原因,是没办法登录2个账号的. 这种情况,可以找到chrome图标,点 ...