Utilisez $http pour implémenter le téléchargement asynchrone de fichiers Excel dans angulairejs

Cet article vous donne une analyse détaillée de la méthode de téléchargement asynchrone $http de fichiers Excel dans angulairejs. Les lecteurs dans le besoin peuvent en apprendre davantage.

1. Le code html de la boîte de téléchargement du fichier est le suivant

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

*Remarque : définissez la valeur de l'attribut enctype du formulaire sur : multipart/form-data

2 : Le code js est le suivant :

$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("");
  }
 }
});

Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère. sera utile à tout le monde à l’avenir.

Articles associés :

Comment créer une instruction pour télécharger des photos dans AngularJS (tutoriel détaillé)

Comment ajouter dynamiquement Li dans javaScript Instance de l'élément

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!