问题：
在angularjs和spring rest服务中与其他表单字段一起上载图像
皇甫智明
我有一个html。我需要上传图像和angularjs和spring rest服务中的其他表单字段。下面是html。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script type="text/javascript" src="resources/js/app.js"></script>
<link href="resources/css/cards.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div ng-app="homeApp" ng-controller="homeController">
<div>
<div id="headerBarMenuText" href="#" ng-click="displayWeddingCards('weddingcards');">Wedding Cards</div>
<div id="headerBarMenuText" href="#" ng-click="displayTab2('tab2');">Tab2</div>
<div id="headerBarMenuText" href="#" ng-click="displayTab3('tab3');">Tab3</div>
<div id="headerBarMenuText" href="#" ng-click="displayReturnGifts('returngifts');">Return Gifts</div>
<div id="headerBarMenuText" href="#" ng-click="displayAdmin('admin');">Admin</div>
</div>
<div ng-show="showHome">
Welcome. Please select the tabs for more details.
</div>
<div ng-show="admin">
Admin
<form>
<div>Name:</div>
<div>
<input type="text" ng-model="name" name="name" />
</div>
<div>Description:</div>
<div>
<input type="text" ng-model="description" name="description" />
</div>
<div>Category:</div>
<div>
<select ng-model="category" name="category">
<option value="0">None Selected</option>
<option value="1">Wedding Cards</option>
<option value="2">Tab 2</option>
<option value="3">Tab 3</option>
<option value="4">Return Gifts</option>
</select>
</div>
<div>Price:</div>
<div>
<input type="text" ng-model="price" name="price" />
</div>
<div>
<input type="file" file-model="multipartFile" name="multipartFile"></input>
</div>
<div>
<input type="button" value="Save" ng-click="uploadImage();" />
</div>
</form>
</div>
</div>
</body>
</html>
以下是Spring控制器方法。
@POST
@Path("/uploadImage")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public void uploadImage(){
}
在上面的代码中，我想上传文件以及数据字段。我使用的是角js和Spring rest服务。如何在js中发送文件以及数据，以及如何在Spring控制器中获取值。我的意思是我应该在上传图像（）方法中使用哪些参数来获取控制器中的表单数据字段和文件。
添加控制器类。和控制器类。
@Controller
@Path("/cards")
public class AppController {
@Autowired
private AppService service;
@RequestMapping(method = RequestMethod.POST, value = "uploadImage")
public void uploadImage(@RequestParam("name") String name ,
@RequestParam("file") MultipartFile file){
System.out.println("Name: "+name);
System.out.println("File Name: "+file.getOriginalFilename());
}
}
还添加了js方法。
$scope.uploadImage = function(){
var fd = new FormData();
fd.append('name', $scope.name);
fd.append('description', $scope.description);
fd.append('file', $scope.multipartFile);
fd.append('price', $scope.price);
$http.post('../oviyacards/service/cards/uploadImage',fd)
.success(function(data) {
alert("Success");
}).error( function(data) {
alert("Failure");
});
}
和web。xml也是。
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Oviya Cards</display-name>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/Beans.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>cards-serlvet</servlet-name>
<servlet-class>com.sun.jersey.spi.spring.container.servlet.SpringServlet</servlet-class>
<init-param>
<param-name>com.sun.jersey.config.property.packages</param-name>
<param-value>com.oviya.cards.controller</param-value>
</init-param>
<init-param>
<param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>cards-serlvet</servlet-name>
<url-pattern>/service/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>/WEB-INF/views/home.html</welcome-file>
</welcome-file-list>
</web-app>
请帮帮我。先谢谢你。
添加pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.oviya</groupId>
<artifactId>oviyacards</artifactId>
<version>1</version>
<packaging>war</packaging>
<name>oviyacards</name>
<url>http://maven.apache.org</url>
<properties>
<spring.version>3.2.5.RELEASE</spring.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-client -->
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-client</artifactId>
<version>1.19.1</version>
</dependency>
<!-- Spring 3 dependencies -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-dao</artifactId>
<version>2.0.8</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-config</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.5</version>
</dependency>
<!-- Jersey + Spring -->
<dependency>
<groupId>com.sun.jersey.contribs</groupId>
<artifactId>jersey-spring</artifactId>
<version>1.8</version>
<exclusions>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
</exclusion>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-server</artifactId>
<version>1.8</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-json</artifactId>
<version>1.8</version>
</dependency>
<dependency>
<groupId>javax.ws.rs</groupId>
<artifactId>jsr311-api</artifactId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20131018</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-bundle -->
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-bundle</artifactId>
<version>1.8-ea03</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.6</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.sun.jersey.contribs/jersey-multipart -->
<dependency>
<groupId>com.sun.jersey.contribs</groupId>
<artifactId>jersey-multipart</artifactId>
<version>1.19</version>
</dependency>
</dependencies>
<build>
<finalName>oviyacards</finalName>
</build>
</project>
共有1个答案
韦繁
在AngularJS控制器中，可以使用如下内容
function uploadImage(){
var formData = new FormData();
fd.append('file', multipartFile);
fd.append('name', name);
fd.append('description', description);
fd.append('category', category);
fd.append('price', price);
$http.post("yourdomain.com/uploadImage", formData);
}
请参阅AngularJS文档了解http:
您的REST控制器可能与此类似
@RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
public void uploadImage(@RequestParam("file") MultipartFile file,
@RequestParam("name") String name, @RequestParam("description") String description,
@RequestParam("category") String category, @RequestParam("price") Double price){
//process your image: file)
}
类似资料：
-
我想通过上载一个图像和员工数据在系统中创建一个员工信息。我可以使用Jersey使用不同的rest调用。但我想在一次rest调用中实现。我提供了下面的结构。请帮我在这方面怎么做。 每当我试图做，我得到错误在Chrome邮差。下面给出了我的Employee json的简单结构。
-
问题内容： 我想用hibernate返回一组中其他字段的行 数 ，而我的实体类中没有任何字段代表计数。例如我有一个付款实体类： sql查询： 和我的hibernate标准： 如我所说，我的问题是我不知道在哪里/如何访问count的值（来自criteria.list（））！ 问题答案： 我认为这是您代码的正确版本：
-
问题内容： 我有一个二和一的表格。我必须将其发送到服务器，但是将文件与文本连接时遇到一些问题。服务器希望得到以下答案： 这是 html ： 这是 控制器 ： 这是 指令文件模型 ： 这就是 服务 ，其调用服务器： 如果尝试发送，则会收到错误400，响应为：。请求的有效负载为： 问题答案： 不要序列与荷兰国际集团服务器。做这个： 然后使用它：
-
我的公司有一个消息传递系统，它以JSON格式发送实时消息，它不是建立在AWS上我们的团队试图使用AWS SQS接收这些消息，然后用DynamoDB存储这些消息，我想用EC2读取这些消息，然后保存它们，有什么更好的解决方案吗？或者怎么做我没有很好的经验
-
问题内容： AngularJS在其文档中明确指出“服务是单例”： 违反直觉，也返回一个Singleton实例。 鉴于非单例服务有很多用例，实现工厂方法以返回Service实例的最佳方法是什么，以便每次声明依赖项时，它的另一个实例都可以满足？ 问题答案： 我认为我们不应该让工厂返回一个有能力的函数，因为这会开始破坏依赖注入，并且该库的行为会很尴尬，尤其是对于第三方。简而言之，我不确定非单项服务是否有
-
本文向大家介绍从由SAP HANA中其他字段分组的表的同一行中获取最大日期和其他字段，包括了从由SAP HANA中其他字段分组的表的同一行中获取最大日期和其他字段的使用技巧和注意事项，需要的朋友参考一下 您已完成了部分纠正，但只差了一步就获得了预期的结果。分组后需要从结果中选择行之一的情况，请使用等级编号或等级函数。 您需要根据需求对数据进行分区，然后根据需求对它们进行排序，然后选择所需的行。 示