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

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

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

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("文件格式不正確，請上傳以.xlsx，.xls 為后綴名的文件。");
   $("#file_asset").val("");
  }
 }
});

您可能感興趣的文章:

相關(guān)文章

Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法
這篇文章主要給大家介紹了關(guān)于Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2017-11-11
AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
這篇文章主要介紹了AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法,結(jié)合具體實例形式分析了AngularJS自定義指令的實現(xiàn)以及與控制器數(shù)據(jù)交互的操作技巧,需要的朋友可以參考下
2017-06-06
AngularGauge 屬性解析詳解
本文主要介紹AngularGauge 屬性的知識，這里這里了詳細的資料來介紹AngularGauge屬性的內(nèi)容知識，幫助大家學習參考，有需要的小伙伴可以參考下
2016-09-09
angular內(nèi)容投影詳解
這篇文章主要為大家介紹了angular內(nèi)容投影，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
Angular實現(xiàn)一個簡單的多選復選框的彈出框指令實例
下面小編就為大家?guī)硪黄狝ngular實現(xiàn)一個簡單的多選復選框的彈出框指令實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
Angular之toDoList的實現(xiàn)代碼示例
本篇文章主要介紹了Angular之toDoList的實現(xiàn)代碼示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
Angular中使用ng-zorro圖標庫部分圖標不能正常顯示問題
這篇文章主要介紹了Angular中使用ng-zorro圖標庫部分圖標不能正常顯示問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04
Angularjs單選框相關(guān)的示例代碼
本篇文章主要介紹了Angularjs單選框相關(guān)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Angular項目從新建、打包到nginx部署全過程記錄
一直比較喜歡angular，正巧最近有個項目用到了，所以想和大家來分享下，下面這篇文章主要給大家介紹了關(guān)于Angular項目從新建、打包到nginx部署的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。
2017-12-12
AngularJs bootstrap搭載前臺框架——基礎(chǔ)頁面
本文主要介紹AngularJs bootstrap搭載前臺框架基礎(chǔ)頁面的建設(shè)，這里整理餓了相關(guān)資料及實現(xiàn)實例代碼，有興趣的小伙伴可以參考下
2016-09-09