如何在應用程序中使用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-文件上傳，shim.min.js和NG-文件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); 
    } 
} 

};

只是試試吧。 它爲我工作.. :)