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写的实用看图工具实现代码
Jul 26 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
angular中的post请求处理示例详解
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
用php实现选择排序的解决方法
2013/05/04 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python实时监控logstash日志代码
2020/04/27 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
基层党员公开承诺书
2014/05/29 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
node快速搭建后台的实现步骤
2022/02/18 NodeJs
Python实现仓库管理系统
2022/05/30 Python