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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 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
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
js字符编码函数区别分析
2008/06/05 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
Seajs源码详解分析
2019/04/02 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
JS实现密码框效果
2020/09/10 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
python多线程用法实例详解
2015/01/15 Python
python先序遍历二叉树问题
2017/11/10 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
社区志愿者活动总结
2014/06/26 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
公积金接收函格式
2015/01/30 职场文书
撤诉申请怎么写
2015/05/19 职场文书
运动会通讯稿100字
2015/07/20 职场文书
小学毕业感言200字
2015/07/30 职场文书