Функция загрузки AngularJs

Я пытаюсь сделать кнопку загрузки на своей странице, используя angularjs и bootstrap, но у меня есть проблема, чтобы дать (загрузить) функцию на этой кнопке в angularjs. Кнопка должна загрузить текстовый файл с компьютера в браузер. Может кто-нибудь мне помочь? вот HTML-код ...Функция загрузки AngularJs

<div class="container"> 
<div class="col-xs-2"> 
     <button type="button" class="nav-justified btn btn-primary upload-button"> Upload </button> 
    </div> 
</div>

источник

2016-06-06 Dimitar

вы код не отображается –

Возможная дубликата [AngularJs: Как проверить изменения в полях ввода файлов?] (http://stackoverflow.com/qu estions/17922557/angularjs-how-to-check-for-changes-in-file-input-fields) – Frank

вы должны использовать '' для загрузки файла –

Проверьте это, чтобы облегчить угловую директиву для загрузки файлов.

ng-file-upload

Вы можете оформить рабочую демо/код здесь

ng-file-upload wokring deom/code

//inject angular file upload directives and services. 
 
var app = angular.module('fileUpload', ['ngFileUpload']); 
 

 
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { 
 
    $scope.uploadPic = function(file) { 
 
    file.upload = Upload.upload({ 
 
     url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
 
     data: {username: $scope.username, file: file}, 
 
    }); 
 

 
    file.upload.then(function (response) { 
 
     $timeout(function() { 
 
     file.result = response.data; 
 
     }); 
 
    }, function (response) { 
 
     if (response.status > 0) 
 
     $scope.errorMsg = response.status + ': ' + response.data; 
 
    }, function (evt) { 
 
     // Math.min is to fix IE which reports 200% sometimes 
 
     file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
 
    }); 
 
    } 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script> 
 
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script> 
 
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script> 
 
<body ng-app="fileUpload" ng-controller="MyCtrl"> 
 
    <form name="myForm"> 
 
    <fieldset> 
 
     <legend>Upload on form submit</legend> 
 
     Username: 
 
     <input type="text" name="userName" ng-model="username" size="31" required> 
 
     <i ng-show="myForm.userName.$error.required">*required</i> 
 
     <br>Photo: 
 
     <input type="file" ngf-select ng-model="picFile" name="file"  
 
      accept="image/*" ngf-max-size="2MB" required 
 
      ngf-model-invalid="errorFile"> 
 
     <i ng-show="myForm.file.$error.required">*required</i><br> 
 
     <i ng-show="myForm.file.$error.maxSize">File too large 
 
      {{errorFile.size/1000000|number:1}}MB: max 2M</i> 
 
     <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button> 
 
     <br> 
 
     <button ng-disabled="!myForm.$valid" 
 
       ng-click="uploadPic(picFile)">Submit</button> 
 
     <span class="progress" ng-show="picFile.progress >= 0"> 
 
     <div style="width:{{picFile.progress}}%" 
 
      ng-bind="picFile.progress + '%'"></div> 
 
     </span> 
 
     <span ng-show="picFile.result">Upload Successful</span> 
 
     <span class="err" ng-show="errorMsg">{{errorMsg}}</span> 
 
    </fieldset> 
 
    <br> 
 
    </form> 
 
</body>

источник

2016-06-06 07:12:47 pradeep1991singh

Функция загрузки AngularJs

ответ

Смежные вопросы