如何在應用程序中使用ng-file-upload（angularjs的新功能）？

Question

我在嘗試同時選擇文件的同時嘗試上載文件。我正在使用angularjs應用程序，在該應用程序中，我需要瀏覽文件並同時將其上載到表行中。

<form>
         <input type="text" class="browse-form"placeholder="   Click browse to load documents " required>
         <button ngf-select="vm.uploadFiles($files)" mutiple accept=".csv,.pdf" class="browse-btn">Browse</button>
        </form>
        <p style="margin-top: -30px;"> Note:Supported file formats are word,excel and pdf only</p>
        <table class="table">
         <tr>
         <thead style="background:#fff;font-size: 13px;font-weight:bold;">
         <th>DOCUMENT NAME</th>
         <th>SIZE</th>
         <th>VERSION</th>
         <th>DATE UPLOADED</th>
         <th>UPLOADED BY</th>
         <th>ACTION</th>
         </thead></tr>
         <tr><td ng-repeat="uploading in files" style="font:smaller">{{uploading.name}}
         <span class="progress" ng-show="uploading.progress >=0">
         <div style="width:{{uploading.progress}}" ng-bind="uploading.progress + '%'">
         </div>
         </span>
          </td>
         </table>

我的控制器

(function () {
'use strict';

angular
.module('app',['ngFileUpload'])
.controller('ManageController', ManageController);

 ManageController.$inject=['$http','$scope','localStorageService','workspaceService','Upload','$timeout'];

 function ManageController($http,$scope,localStorageService,workspaceService,Upload,$timeout) {
    var vm = this;
    //uploading
    vm.uploadFiles=function(files){
    vm.files=files;
 angular.forEach(files,function(file){
  file.upload=Upload.upload({
      url:' ',
      data:{file:file}
  });
  file.upload.then(function(response){
      $timeout(function(){
          file.result=response.data;
      });
  });

  });
  }
  }
  })();

我已經將ng-file-upload-shim.min.js和ng-file-upload.js這兩個腳本作為腳本包含在我的主要index.html中。 ngFileUpload拼寫錯誤。

Answer 1

在html中，只需添加以下代碼即可。

<button class="btn btn-danger active" ngf-select="upload($file)">Upload</button>

在控制器中，您可以這樣做。

$scope.upload = function (file) {
  if(file){
   try{        
    var token = 'token if required' ; // optional field
    Upload.upload({
        url: 'enter url to hit api',
        data: {file: file, 'username': $scope.username},
        headers: {'Authorization': 'JWT ' + token},
    }).then(function onSuccess(response) {
        console.log("success");
    }).catch(function onError(response) {
        console.log("error",response);
    });
  }catch(error){
    console.log(error.message);
  }
}

};

去嘗試一下。 它為我工作.. :)