как мы можем загрузить файл в angularJS

есть ли прямой подход для загрузки файлов в angularJS. Я совершенно новый для angularJS. Пробовали прибегая к помощи по этому поводу, но не смог найти какой-либо простой пример на this.do крошечной необходимости устанавливать какие-либо библиотеки/.js файлыкак мы можем загрузить файл в angularJS

<!DOCTYPE html> 
    <html ng-app xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    </head> 
<body> 
<h5>Upload</h5> 
    <!--<div class="span12">-->    
    <div class="span4"> 
     <div class="fileupload fileupload-new" data-provides="fileupload"> 
      <div class="input-append"> 
       <div class="uneditable-input span3"> 
        <i class="icon-file fileupload-exists"></i> 
        <span class="fileupload-preview" ng-model="userType"></span>           
       </div>         
       <span class="btn btn-file"> 
        <span class="fileupload-new">Select file</span> 
        <span class="fileupload-exists">Change</span> 
        <!--<input type="file" name="file" />--> 
        <input type="file" ng-model="upFile" onchange="angular.element(this).scope().setFileEventListener(this)" /> 
       </span> 
       <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> 
      </div> 
     </div>     
    </div> 
    <div class="span2" > 
     <button type="submit" value="Send" id="btnStartUpload" class="btn start" ng-click="uploadFile()" ng-disabled="!upload_button_state"> 
      <i class="icon-upload"></i> 
      <span>Upload File</span> 
     </button>      
    </div> 
    <script> 
     $scope.setFileEventListener = function (element) { 
      $scope.uploadedFile = element.files[0]; 

      if ($scope.uploadedFile) { 
       $scope.$apply(function() { 
        $scope.upload_button_state = true; 
       }); 
      } 
     } 

     $scope.uploadFile = function() { 
      uploadFile(); 
     }; 


     function uploadFile() { 
      if (!$scope.uploadedFile) { 
       return; 
      } 

      ajax_post.uploadFile_init($scope.uploadedFile) 
       .then(function (result) { 
        if (result.status == 200) { 
         $scope.storeDB_button_state = true; 
         clientInfo.imagePath = "/uploadsfolder/" + $scope.uploadedFile.name; 

        } 
       }, function (error) { 
        alert(error.message); 
       }); 
     } 
    </script> 
</body> 
</html>

источник

2013-11-19 Santosh

Вот такие фрагменты кода, загружать любые файлы (изображения также) на сервер с помощью

самозагрузки-FileUpload (бутстрап V2.3.1-J6)

enter image description here

HTML

<h5>Upload</h5> 
    <!--<div class="span12">-->    
    <div class="span4"> 
     <div class="fileupload fileupload-new" data-provides="fileupload"> 
      <div class="input-append"> 
       <div class="uneditable-input span3"> 
        <i class="icon-file fileupload-exists"></i> 
        <span class="fileupload-preview" ng-model="userType"></span>           
       </div>         
       <span class="btn btn-file"> 
        <span class="fileupload-new">Select file</span> 
        <span class="fileupload-exists">Change</span> 
        <!--<input type="file" name="file" />--> 
        <input type="file" ng-model="upFile" onchange="angular.element(this).scope().setFileEventListener(this)" /> 
       </span> 
       <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> 
      </div> 
     </div>     
    </div> 
    <div class="span2" > 
     <button type="submit" value="Send" id="btnStartUpload" class="btn start" ng-click="uploadFile()" ng-disabled="!upload_button_state"> 
      <i class="icon-upload"></i> 
      <span>Upload File</span> 
     </button>      
    </div>

$scope.setFileEventListener = function(element) { 
     $scope.uploadedFile = element.files[0]; 

     if ($scope.uploadedFile) { 
      $scope.$apply(function() { 
       $scope.upload_button_state = true; 
      }); 
     } 
    } 

$scope.uploadFile = function() { 
    uploadFile(); 
}; 


function uploadFile() { 
    if (!$scope.uploadedFile) { 
     return; 
    } 

    ajax_post.uploadFile_init($scope.uploadedFile) 
     .then(function(result) { 
      if (result.status == 200) { 
       $scope.storeDB_button_state = true; 
       clientInfo.imagePath = "/uploadsfolder/" +  $scope.uploadedFile.name; 

      } 
     }, function(error) { 
      alert(error.message); 
     }); 
}

Здесь мы используем сервис ajax_post и вызвать метод: uploadFile_init:

фабрика

app.factory('ajax_post', ['$http', function(_http) { 

     return {   
      uploadFile_init: function(uploadedFile) { 
       var fd = new FormData(); 
       fd.append("uploadedFile", uploadedFile); 
       var upload_promise = _http.post('somePath', 
        fd, { 
         headers: { 
          'Content-Type': undefined 
         }, 
         transformRequest: angular.identity 
        }); 

       return upload_promise; 
      } 
     } 
    } 
]);

Надежда, которая поможет

источник

2013-11-19 07:58:39

Большое спасибо за помощь ... Я почти готов ... но не могу понять, что такое фабрика приложений (я новичок в этом). Я только что создал одну HTML-страницу в Visualstudio 2012 и добавил код HTML и js в эта страница. Возможно, я ошибаюсь. Пожалуйста, помогите мне в этом процессе. Ничего не происходит, когда я нажимаю кнопку загрузки файла. Мне нужно добавить любой jquery/js reference.i приложит файл html файла/проекта – Santosh

Добро пожаловать в мир Angularjs ! Я не могу описать, как работает angualr, его выход из области вопросов, но вы можете посмотреть на эту демонстрацию, как работает фабрика: http://jsfiddle.net/pkozlowski_opensource/PxdSP/14/ –

добавил мой код к вопросу.please проверить его .added ng-app to html tag в start.read, где это необходимо для угловых js. – Santosh

как мы можем загрузить файл в angularJS

ответ

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