Angular.js ng-file-upload結(jié)合springMVC的使用教程
更新時間：2017年07月10日 10:31:51 作者：ngulc
這篇文章主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC的使用教程，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
前言
本文主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC使用的相關(guān)內(nèi)容，對于Angular.js文件上傳控件ng-file-upload不熟悉的朋友們可以先看看這篇文章（傳送門），下面話不多說，來看看詳細(xì)的使用介紹：
引入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>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
ionic3+Angular4實現(xiàn)接口請求及本地json文件讀取示例
本篇文章主要介紹了ionic3+Angular4實現(xiàn)接口請求及本地json文件讀取示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本篇文章主要介紹了詳解如何在Angular中快速定位DOM元素，非常具有實用價值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了詳解angular2.x創(chuàng)建項目入門指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Angularjs的鍵盤事件的綁定的相關(guān)資料,這里提供了兩種方法，1.ng內(nèi)置指令，2.自定義指令，并進(jìn)行比較，需要的朋友可以參考下2017-07-07
AngularJS基礎(chǔ)學(xué)習(xí)筆記之指令
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要創(chuàng)建應(yīng)用特定的指令。這篇教程會為你講述如何自定義指令，以及介紹如何在實際項目中使用。2015-05-05
Angular實現(xiàn)類似博客評論的遞歸顯示及獲取回復(fù)評論的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于Angular如何實現(xiàn)類似博客評論的遞歸顯示及獲取回復(fù)評論的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
AngularJS 實現(xiàn)JavaScript 動畫效果詳解
本文主要介紹AngularJS 實現(xiàn) JavaScript 動畫的資料，這里整理了詳細(xì)的資料和簡單示例代碼，有興趣的小伙伴可以參考下2016-09-09
這篇文章主要為大家詳細(xì)介紹了Angularjs中的依賴注入，AngularJS提供了一個至高無上的依賴注入機制，感興趣的小伙伴們可以參考一下2016-03-03
AngularJS基礎(chǔ) ng-list 指令詳解及示例代碼
本文主要介紹AngularJS ng-list 指令,這里幫大家整理了ng-list指令的基本資料,并附有示例代碼,有需要的小伙伴可以參考下2016-08-08
詳解使用angular-cli發(fā)布i18n多國語言Angular應(yīng)用
這篇文章主要介紹了詳解使用angular-cli發(fā)布i18n多國語言Angular應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05