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 相关文章推荐
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
jquery实现拖动效果
Aug 10 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
javascript实现倒计时提示框
Mar 02 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
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php join函数应用
2011/05/04 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python多线程实例教程
2014/09/06 Python
python中global与nonlocal比较
2014/11/21 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python求解水仙花数的方法
2015/05/11 Python
使用python实现knn算法
2017/12/20 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Pandas之缺失数据的实现
2021/01/06 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
医院辞职信范文
2014/01/17 职场文书
2014年党课学习材料
2014/05/11 职场文书
承诺书模板
2014/08/30 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
小学中队委竞选稿
2015/11/20 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang