angularjsFileUpload+Springmvc上传文件

angular与springboot实现文件的上传以及照片回显 angular与springboot实现文件的上传以及照片回显 近期进入公司,开始接触angular,并要求使用angular+springboot做一个小例子,其中涉及到了照片上传这方面的知识,做出来以后记录一下踩过的坑,希望之后再做这类功能的时候不要再犯。 文件上传 从前端开始说起,我先把代码贴上,这是文件上传组件的html界面,angular的构造我就不写了,自己看一下官方文档应该就都能明白... 阅读详情

1.html页面以及js来自于angularjsFileUpload的demo

multiple属性为允许多个文件同时上传


参数设置

url为文件上传路径

formData属性对应的是参数数组,这里以传递id为例


2.springmvc后台

package com.baosight.webapp.web;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

import com.baosight.webapp.bean.App;



@Controller
@RequestMapping("/ngFileUpload")
public class NgFileUpload {

	@RequestMapping(value="/test", method=RequestMethod.POST	)
	@ResponseBody
	public Map<String, Object> ngUpload(HttpServletRequest request,HttpServletResponse res){
		System.out.println("in");
		//接收参数
		int id= Integer.parseInt(request.getParameter("id"));
		System.out.println("id=="+id);
		Map<String, Object> resMap = new HashMap<String, Object>();
		resMap.put("result", "error");

		//解析器解析request的上下文
		CommonsMultipartResolver multipartResolver =
			new CommonsMultipartResolver(request.getSession().getServletContext());
		  //先判断request中是否包涵multipart类型的数据,
		if(multipartResolver.isMultipart(request)){
		   //再将request中的数据转化成multipart类型的数据
			MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
			Iterator iter = multiRequest.getFileNames();
			while(iter.hasNext()){
				//这里的name为fileItem的alias属性值,相当于form表单中name
				String name=(String)iter.next();
				System.out.println("name:"+name);
				//根据name值拿取文件
				MultipartFile file = multiRequest.getFile(name);
				if(file != null){
					String fileName = file.getOriginalFilename();
					String path = "D:/test/" + fileName;
					File localFile = new File(path);
					if(!localFile.getParentFile().exists()) {
						 //如果目标文件所在的目录不存在,则创建父目录
						 localFile.getParentFile().mkdirs();
						 System.out.println("parent:"+localFile.getParentFile().getPath());
					 }
					//写文件到本地
					try {
						file.transferTo(localFile);
					} catch (IOException e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
						return resMap;
					}
				}
			}
		  }else {

			  return resMap;
		}
		  resMap.put("result", "success");
		  return resMap;
    }


}

3.备注:

获取参数 request.getParameter("id")
这里的拿到的name为fileItem的alias属性值,相当于form表单中name           String name=(String)iter.next();
如果想通过file的name属性值获取文件,对文件进行分类接受,可以通过controller中item的alias属性值。

uploader.uploadAll()是提交所有文件的方法,但是实质上来说该方法是将每个文件提交一次。虽然只触发了一次uploadAll方法,但是有多少个文件就会进多少次后台。实质上是文件进行单个传输。

2. Netty使用JSerialComm进行串口读取(二) 现在开始处理这些问题 第一个问题:串口读取超时异常一路传播到最后也没有处理。 ​ 第二个问题:即使处理了该异常,程序仍然退出,这不能满足一些实际使用要求需求。该问题与设置很长的读取超时时间没关系,无论多长到时间后总会退出。 阅读详情

相关推荐

ULN2003驱动28BYJ-48步进电机详解(附:51 32代码讲解)

本文介绍了28BYJ-48步进电机的驱动原理以及注意事项,并展示了极简 32 51驱动代码

qq_41818650的博客 1万+

angularjs java 文件上传_用angularjs进行文件上传

文件上传页面三要素:1、 form表单提交方式一定是post2、 form表单的enctype一定是multipart/form-data3、 form表单中一定要有一个input的type是 file文件上传一定要有的jarCommons-io和commons-fileuploadSpringmvc文件上传:1、 springmvc.xml中一定要有 多媒体解析器class="org.s...

weixin_39926540的博客 437

Nvidia Jetson AGX Orin 如何进入 Recovery Mode(刷机注意事项)

Jetson Orin 如何进入Recovery mode + 刷机注意事项

Pandako's Blog 1万+

SpringMVC实现angularjs图片上传

controller文件: import com.geego.result.base.ResultMessage; import com.geego.util.BaseUtil; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; im

znsqingfeng的专栏 2453

【Python】SimpleITK使用笔记

1. 概念 1.1 nii格式 1.2 SimpleITK 1.3 SimpleITK 图像 2. 基本操作 2.1 常见属性 2.1 读取和保存图像 2.2 SimpleITK图像数据和Numpy矩阵数据之间的转换

See_Star的博客 7898

wimdows11 eplan安装过程及遇到的问题

eplan 安装 我的资源里的下载地址,当然也可以有其他渠道下载 https://download.youkuaiyun.com/download/weixin_45529296/85061161 安装1 打开“Electric P8 2.7.3.11418”目录,运行“setup.exe”开始安装,选择系统和程序 接受许可协议,下一步 自己配置安装的各种路径,下一步 安装这个没什么问题,直到完成就行; 安装2 ...

csdn-1122 2万+

入门angular:文件的下载和上传

由于angular的火热 ***服务器端:pom.xml*********************jar准备************************************** 1. 首先对文件spring和springMVC进行对文件的上传和下载首先需要下载jar包 commons-fileupload commons-fileupload 1.3.1 org.a

sinat_肖旭东的博客 1万+

nnU-Net v2实战:从零开始配置环境与训练自定义医学影像数据集

本文详细介绍了nnU-Net v2在医学影像分割中的实战应用,从环境配置到自定义数据集训练的全流程。重点讲解了Python 3.9+环境搭建、PyTorch安装技巧、医学影像数据预处理规范,以及五折交叉验证训练方法,帮助开发者快速掌握这一先进的医学影像分析工具。

weixin_28718487的博客 352

SpringMVC上传文件FileUpload

springMVC上传文件几种方式

魂-淡 9892

6、探索音乐结构中的统一性:贝多芬《英雄交响曲》第一乐章的深度剖析

本文深入剖析了贝多芬《英雄交响曲》第一乐章的音乐结构,探讨其统一性的来源及表现形式。通过主题与动机、和声与调性、旋律与节奏、织体与动态等多方面的分析,揭示了这部作品在技术层面和情感表达上的卓越成就。

b9c0d的博客 518

【AutoSAR】【以太网】TCP/IP 栈详述与配置

目录 一、TCP/IP栈架构 二、TCP\IP栈的可扩展性 三、以太网协议V4 四、以太网协议 V6 五、基于IP的协议 六、函数调用序列图 一、TCP/IP栈架构 根据以上架构图,该栈主要包括:UPD\TCP\DHCP\ICMP\IPV4\IPV6\ARP; 二、TCP\IP栈的可扩展性 TCP\IP栈为适应不同的应用场景需求,将分为三类: 配置工程里的配置项: 三、以太网协议V4 1 IPV4 Internet Protocol (IP)是T.

专注汽车软件开发、AutoSAR、车载以太网、SOA、EE架构。 5696

Angular angular-file-upload 入坑记

我们写网站呢 上传功能几乎是一定会用到的,这是一个灰常使用的插件,而且操作简单,非常容易使用,老规矩还是放一下API,走运的是,这个插件的API并不需要翻墙也看得到哦~ https://github.com/nervgh/angular-file-upload 进入正题,我们如何安装,还是老样子安利波npmnpm install angular-file-upload我们如何在项目中使用它呢

不忘初心 2万+

Python OpenCV教程从入门到精通的全面指南【文末送书】

全书共分为16章,包括Python与OpenCV、搭建开发环境、图像处理的基本操作、像素的操作、色彩空间与通道、绘制图形和文字、图像的几何变换、图像的阈值处理、图像的运算、模板匹配、滤波器、腐蚀与膨胀、图形检测、视频处理、人脸检测和人脸识别以及MR智能视频打卡系统。主流技术,全面覆盖:本书内容丰富,涵盖了Open CV图像处理技术的方方面面,如图像的几何变换、阈值处理、图像运算、模板匹配、滤波器、腐蚀与膨胀、图形检测、视频处理、人脸检测和人脸识别等。此外,通过对比原图,可更直观地看到图像经过处理后的效果。

一键难忘的博客 9075

springMVC文件上传

文件上传在应用系统中很常见,springMVC架构下,文件上传是怎么做的呢,看看下面的例子。 这里不对springMVC配置做说明,请参看: http://blog.youkuaiyun.com/clj198606061111/article/details/20492887   一、引入的jar包 1)  commons-fileupload-1.3.1.jar 2)  commons-io-2

都是浮云 2万+

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

angular——上传下载文件

html篇 &lt;!-- 下载文件 --&gt; &lt;div&gt; &lt;a (click)="getFile()"&gt;点我测试post方式下载文件&lt;/a&gt; &lt;/div&gt; &lt;!-- 上传单个文件 --&gt; &lt;div&gt; &lt;input type="file" (change)=&

一个程序员的一些碎碎念 9761

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

angular-file-upload angularJS 文件上传

angular-file-upload angularJS文件上传插件

David宫洪深的博客 9011

angular-file-upload的使用总结

地址:https://github.com/nervgh/angular-file-upload 第一次使用这个组件,感觉这个组件的api在介绍略微简单,所以尝试了一会儿才成功。 这边我需要的功能是: 1.只能导入xls。 2.可以选择文件。 3.可以拖动文件上传。 4.上传过程中显示process。html页面部分code<div class="drop-file" nv-file-d

星空&无痕 の 博客 5488

AngularJs指令+Java 实现图片上传、显示、删除

一.页面edit.html&lt;!-- 图片上传指令引入--&gt; &lt;load-img to-show="$parent.photosUrl"&gt;&lt;/load-img&gt;二.  service.jsstarter_services.directive('loadImg', function($cordovaCamera,$ionicActionSheet,$cor...

一只狐猴的博客 1776

ajaxFileUpload+SpringMVC框架+maven 实现文件上传

贴代码比较直接,要说明的是,网上下载的插件不能直接拿来用,要经过修改才能真正实现。 1、静态页面html端: 信件主题: *信件内容:

木子宇 1978

【spring-mvc】springmvc+angularjs 图片文件上传 遇到302重定向问题

在做品优购的时候,文件上传 controller类代码 /** * 文件上传 * @author jia * */ @RestController public class UploadController { //@Value("${FILE_SERVER_URL}") private String file_server_url = "http://192.168...

芝兰生于深谷,不以无人而不芳 1466

bootstrap + angularjs + springmvc + mybatis框架之图片上传和展示

上传图片使用的是angularjs插件ng-file-upload 找不到Upload 需要在app.js中引入ngFileUpload 图片传到java,java保存到tomcat的webapp下面,启动该tomcat,可以修改端口为8082, 数据库保存地址http://127.0.0.1:8081/driverPic\1456909688584.jpg

yushuanggui的专栏 2111

ssm框架ajax异步进行图片的上传

body&lt;a href="javascript:void(0)" class="ui_avatar bgr3" onclick="upload()"&gt; &lt;input type="hidden" value="${user.userid}" id="byid"&gt;         &lt;input type="f

NULL 3100

AngularJs接受 ResponseEntity<byte[]>二进制流,实现下载文件

后台使用SpringMVC 的 ResponseEntity 参数返回类型,前台使用AngularJs请求。代码如下 后台代码: @RequestMapping("/down") @ResponseBody public ResponseEntity expoertExcel(..) throws IOException{      ...         return new Resp

wspc_的博客 5981

AngularJS上传文件

使用AngularJS上传文件 前台是Angular页面 后台使用SpringBoot/SpirngMVC 上传文件 html &lt;div&gt; &lt;input id="fileUpload" type="file" /&gt; &lt;button ng-click="uploadFile()"&gt;上传&lt;/button&

啦啦啦啦 la 1万+

angularjs springboot上传文件ContentType:multipart/form-data

1、Http协议传输中可以传送多部分对象集合。对应的Content-Type为multipart/form-dataContent-Type: multipart/form-data; boundary=AaB03x --AaB03x Content-Disposition: form-data; name="field1" Joe Blow --AaB03x Content-Dispositio...

XinZhongYi的博客 4868
上一篇: webapp根据User-Agent获取手机信息
下一篇: JAVA WEB项目定时执行任务
programmeryu
博客等级 码龄11年 23粉丝 67原创
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值