AngularJS Загрузка изображения с помощью ng-upload

Ответ 1

Документация по angular для загрузки файлов отсутствует. Множество решений требуют настраиваемых директив других зависимостей (jquery в primis... просто для загрузки файла...). После многих попыток я нашел это с помощью только angularjs (проверено на v.1.0.6)

HTML

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs (1.0.6) не поддерживает ng-модель в тегах "входного файла", поэтому вам нужно сделать это с помощью "нативного" способа, который передает все (в конечном итоге) выбранные файлы от пользователя.

контроллер

$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );

};

Классная часть - это тип контента undefined и идентификатор transformRequest: angular., которые дают при $http возможность выбора правильного "типа контента" и управления границей, необходимой при обработке многостраничных данных.

Ответ 2

Вы можете попробовать ng-file-upload плагин angularjs.

Это довольно легко настроить и разобраться с деталями angularjs. Он также поддерживает прогресс, отмену, перетаскивание и перекрестный браузер.

HTML

<!-- Note: MUST BE PLACED BEFORE angular.js-->
<script src="ng-file-upload-shim.min.js"></script> 
<script src="angular.min.js"></script>
<script src="ng-file-upload.min.js"></script> 

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directives and service.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.PHP скрипт, node.js route, or servlet url
        data: {myObj: $scope.myModelObj},
        file: file,
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      });
    }
  };
}];

Ответ 3

Ошибка при загрузке файла: "контейнер не имеет метода обработки POST"

App.service('fileUpload', ['$http', function($http) {
    this.uploadFileToUrl = function(file, uploadUrl) {
        console.log("inside upload file service js ");
        var fd = new FormData();
        fd.append('file', file);

        $http.post(uploadUrl, fd, {
                transformRequest: angular.identity,
                headers: {
                    'Content-Type': undefined
                }
            })
            .success(function(response) {

                console.log("file uploaded sucessfully " + response);

            })
            .error(function(error) {

                console.log("Error while uploading file " + JSON.stringify(error));
            });
    }
}]);

{ "error": { "name": "Error", "status": 404, "message": "Shared class \" container\ "не имеет метода обработки POST/5555-1111", "statusCode": 404, "стек": "Ошибка:

Ответ 4

В моем случае вышеупомянутые методы работают нормально с php, но когда я пытаюсь загрузить файлы с этими методами в node.js, то у меня есть некоторые проблемы. Поэтому вместо использования $http ({..,..,...}) используйте обычный jQuery ajax.

Для выбора файла используйте этот

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)"/>

И в контроллере

$scope.uploadFile = function(element) {   
var data = new FormData();
data.append('file', $(element)[0].files[0]);
jQuery.ajax({
      url: 'brand/upload',
      type:'post',
      data: data,
      contentType: false,
      processData: false,
      success: function(response) {
      console.log(response);
      },
      error: function(jqXHR, textStatus, errorMessage) {
      alert('Error uploading: ' + errorMessage);
      }
 });   
};