Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-05 11:03:03
original
2060 Les gens l'ont consulté

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>
Copier après la connexion

*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(&#39;file&#39;, file);
   $http({
    method:"post",
    url:commonService.projectName + "/so/assetmanage/upload",
    data:formData,
    headers : {
     &#39;Content-Type&#39; : undefined
    },
    transformRequest : angular.identity
   }).then(function (response) {
    if(response.status == 200){
     alert("文件上传成功!!!");
    }else{
     alert("文件上传失败!!!");
    }
   });
  }else{
   alert("文件格式不正确,请上传以.xlsx,.xls 为后缀名的文件。");
   $("#file_asset").val("");
  }
 }
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal