Angular.js ng-file-upload结合springMVC的使用教程


Posted in Javascript onJuly 10, 2017

前言

本文主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC使用的相关内容,对于Angular.js文件上传控件ng-file-upload不熟悉的朋友们可以先看看这篇文章(传送门),下面话不多说,来看看详细的使用介绍:

引入angular和ng-file-upload。

前端代码

Upload.upload({
 url: 'upload',
 fields: {'username': 'zouroto'}, // additional data to send
 file: file
 }).progress(function (evt) {
 var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
 console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
 }).success(function (data, status, headers, config) {
 console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
 });

springMVC代码:

@Controller
public class UiController {

 @ResponseStatus(HttpStatus.OK)
 @RequestMapping(value = "/upload")
 public void upload(@RequestParam("file") MultipartFile file, @RequestParam("username") String username ) throws IOException {

 byte[] bytes;

 if (!file.isEmpty()) {
  bytes = file.getBytes();
  //store file in storage
 }

 System.out.println(String.format("receive %s from %s", file.getOriginalFilename(), username));
 }

}

application config

<bean id="multipartResolver"
 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
 <property name="maxUploadSize" value="5000000"/>
 </bean>

maven

<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.1</version>
 </dependency>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JavaScript的目的分析
Jan 05 Javascript
共享自己写一个框架DreamScript
Jan 20 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 #Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 #Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 #Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 #Javascript
Vue实现virtual-dom的原理简析
Jul 10 #Javascript
Vue2路由动画效果的实现代码
Jul 10 #Javascript
深入浅析Node.js单线程模型
Jul 10 #Javascript
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php的XML文件解释类应用实例
2014/09/22 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python threading多线程编程实例
2014/09/18 Python
Apache如何部署django项目
2017/05/21 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
python基于opencv 实现图像时钟
2021/01/04 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
什么是数组名
2012/05/10 面试题
中专生自荐信
2013/10/12 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
总会计师岗位职责
2014/02/19 职场文书
学生评语大全
2014/04/18 职场文书
志愿者活动总结范文
2014/04/26 职场文书
《叶问2》观后感
2015/06/15 职场文书