引入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>