angularjs中$http異步上傳Excel文件方法

更新時(shí)間：2018年02月23日 14:04:34 作者：碼農(nóng)蘇

本篇文章給大家詳細(xì)分析了angularjs中$http異步上傳Excel文件方法，對(duì)此有需要的讀者可以學(xué)習(xí)下。

1.文件上傳框html代碼如下

<form id="fileForm" enctype="multipart/form-data">
 <button id="import_asset" type="button" ng-click="import_asset()">上傳文件</button>
 <input id="file_asset" type="file" style="display: none;"/>
</form>

*注意：設(shè)置form的enctype屬性值為：multipart/form-data

2：js代碼如下：

$scope.import_asset = function () {
 $("#file_asset").click();
};
$("#file_asset").on("change", function(){
 var formData = new FormData();
 var file = document.getElementById("file_asset").files[0];
 if(file.name){
  var fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
  if(fileName =="xlsx" || fileName =="xls"){
   formData.append('file', file);
   $http({
    method:"post",
    url:commonService.projectName + "/so/assetmanage/upload",
    data:formData,
    headers : {
     'Content-Type' : undefined
    },
    transformRequest : angular.identity
   }).then(function (response) {
    if(response.status == 200){
     alert("文件上傳成功！??！");
    }else{
     alert("文件上傳失?。。。?);
    }
   });
  }else{
   alert("文件格式不正確，請(qǐng)上傳以.xlsx，.xls 為后綴名的文件。");
   $("#file_asset").val("");
  }
 }
});

您可能感興趣的文章:

相關(guān)文章

AngularJS 依賴(lài)注入詳解及示例代碼
本文主要介紹AngularJS 依賴(lài)注入的知識(shí)，這里整理了相關(guān)的基礎(chǔ)知識(shí)，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下
2016-08-08
將angular-ui的分頁(yè)組件封裝成指令的方法詳解
這篇文章主要給大家介紹了將angular-ui的分頁(yè)組件封裝成指令的方法，文中介紹的非常詳細(xì)，相信會(huì)對(duì)大家的學(xué)習(xí)或者工作覺(jué)有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。
2017-05-05
Angularjs 滾動(dòng)加載更多數(shù)據(jù)
AngularJS 通過(guò)新的屬性和表達(dá)式擴(kuò)展了 HTML。本文主要給大家介紹Angularjs 滾動(dòng)加載更多數(shù)據(jù)的相關(guān)知識(shí)，需要的朋友參考下吧
2016-03-03
Angular 通過(guò)注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例
這篇文章主要介紹了Angular 通過(guò)注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例代碼,需要的朋友可以參考下
2017-05-05
AngularJS自定義表單驗(yàn)證功能實(shí)例詳解
這篇文章主要介紹了AngularJS自定義表單驗(yàn)證功能,結(jié)合完整實(shí)例形式詳細(xì)分析了AngularJS實(shí)現(xiàn)表單驗(yàn)證的相關(guān)指令、模型綁定、數(shù)據(jù)驗(yàn)證等操作技巧,需要的朋友可以參考下
2018-08-08
AngularJS驗(yàn)證信息框架的封裝插件用法【w5cValidator擴(kuò)展插件】
這篇文章主要介紹了AngularJS驗(yàn)證信息框架的封裝插件用法,分析了AngularJS表單驗(yàn)證規(guī)則并實(shí)例說(shuō)明了w5cValidator擴(kuò)展插件的相關(guān)使用技巧,需要的朋友可以參考下
2016-11-11
Angular-Touch庫(kù)用法示例
這篇文章主要介紹了Angular-Touch庫(kù)用法,結(jié)合觸屏滑動(dòng)事件的實(shí)現(xiàn)為例分析了Angular-Touch庫(kù)的相關(guān)使用技巧,需要的朋友可以參考下
2016-12-12
AngularJS入門(mén)教程之迭代器過(guò)濾詳解
本文主要介紹AngularJS 迭代器過(guò)濾,這里提供了詳細(xì)的知識(shí)資料，并附示例代碼，有需要的小伙伴可以參考下
2016-08-08
Angular2 PrimeNG分頁(yè)模塊學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了Angular2 PrimeNG分頁(yè)模塊學(xué)習(xí)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法
這篇文章主要介紹了使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03