Angular.js ng-file-upload結(jié)合springMVC的使用教程
更新時間：2017年07月10日 10:31:51 作者：ngulc
這篇文章主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC的使用教程，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
前言
本文主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC使用的相關(guān)內(nèi)容，對于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>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
基于angular6.0實現(xiàn)的一個組件懶加載功能示例
這篇文章主要介紹了基于angular6.0實現(xiàn)的一個組件懶加載功能示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了AngularJS實現(xiàn)表單元素值綁定操作,結(jié)合具體實例形式分析了AngularJS針對表單元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
AngularJS基礎(chǔ)學(xué)習(xí)筆記之表達式
AngularJS表達式用于應(yīng)用程序數(shù)據(jù)綁定到HTML。表達式都寫在雙括號就像{{表達式}}。表達式中的行為跟ng-bind指令方式相同。 AngularJS應(yīng)用表達式是純javascript表達式，并輸出它們被使用的數(shù)據(jù)在那里。2015-05-05
angularjs項目的頁面跳轉(zhuǎn)如何實現(xiàn)（5種方法）
本篇文章主要介紹了詳解angularjs項目的頁面跳轉(zhuǎn)如何實現(xiàn) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
AngularJS動態(tài)添加數(shù)據(jù)并刪除的實例
下面小編就為大家分享一篇AngularJS動態(tài)添加數(shù)據(jù)并刪除的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了angular 服務(wù)隨記小結(jié),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
angularJs復(fù)選框checkbox選中進行ng-show顯示隱藏的方法
今天小編就為大家分享一篇angularJs復(fù)選框checkbox選中進行ng-show顯示隱藏的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了詳解如何構(gòu)建一個Angular6的第三方npm包,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
基于datepicker定義自己的angular時間組件的示例
這篇文章主要介紹了基于datepicker定義自己的angular時間組件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
AngularJS是google在維護，其在國外已經(jīng)十分火熱，可是國內(nèi)的使用情況卻有不小的差距，參考文獻/網(wǎng)絡(luò)文章也很匱乏。下面這篇文章主要給大家介紹了關(guān)于Angular.js中數(shù)組操作的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07