我如何在应用程序中使用 ng-file-upload（angularjs 的新手）？

Question

我试图在 select 同时上传文件，我正在使用 angularjs 应用程序，我需要在浏览文件的同时将其上传到table 行。

<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;
      });
  });

  });
  }
  }
  })();

我在主 index.html 中包含了 ng-file-upload-shim.min.js 和 ng-file-upload.js 作为脚本...... 我仍然在我的应用程序中出现完全空白的屏幕，指出 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);
  }
}

};

试试吧。它对我有用.. :)

我如何在应用程序中使用 ng-file-upload（angularjs 的新手）？

How can i work with ng-file-upload in a application(new to angularjs)?

javascript

angularjs

ng-file-upload