Si te encuentras con algo que no comprendes puedes comentarlo y haremos todo lo posible de ayudarte lo más rápido posible.

Solución:

En primer lugar

1. No necesita ningún cambio especial en la estructura. Quiero decir: etiquetas de entrada html.

1.2 crear una directiva propia,

.directive("fileModel",function() 
	return 
		restrict: 'EA',
		scope: 
			setFileData: "&"
		,
		link: function(scope, ele, attrs) 
			ele.on('change', function() 
				scope.$apply(function() 
					var val = ele[0].files[0];
					scope.setFileData( value: val );
				);
			);
		
	
)

2. En el módulo con $ httpProvider agregue dependencia como (Aceptar, Tipo de contenido, etc.) con multipart / form-data. (La sugerencia sería aceptar la respuesta en formato json) Por ejemplo:

$ httpProvider.defaults.headers.post[‘Accept’] = ‘aplicación / json, texto / javascript’; $ httpProvider.defaults.headers.post[‘Content-Type’] = ‘multiparte / form-data; juego de caracteres = utf-8 ‘;

3. Luego cree una función separada en el controlador para manejar la llamada de envío de formularios. como por ejemplo por debajo del código:

4. En la función de servicio, maneje el parámetro “responseType” a propósito para que el servidor no arroje “byteerror”.

5. transformRequest, para modificar el formato de solicitud con identidad adjunta.

6. con credenciales: false, para obtener información de autenticación HTTP.

in controller:

  // code this accordingly, so that your file object 
  // will be picked up in service call below.
  fileUpload.uploadFileToUrl(file); 


in service:

  .service('fileUpload', ['$http', 'ajaxService',
    function($http, ajaxService) 

      this.uploadFileToUrl = function(data) 
        var data = ; //file object 

        var fd = new FormData();
        fd.append('file', data.file);

        $http.post("endpoint server path to whom sending file", fd, 
            withCredentials: false,
            headers: 
              'Content-Type': undefined
            ,
            transformRequest: angular.identity,
            params: 
              fd
            ,
            responseType: "arraybuffer"
          )
          .then(function(response) 
            var data = response.data;
            var status = response.status;
            console.log(data);

            if (status == 200 )
          .catch(function(error) 
            console.log(error.status);

            // handle else calls
          );
      
    
  }])

Esto es solo una copia de la página de demostración del proyecto y muestra la carga de un solo archivo en el formulario de envío con el progreso de la carga.

(function (angular) 
'use strict';

angular.module('uploadModule', [])
    .controller('uploadCtrl', [
        '$scope',
        '$upload',
        function ($scope, $upload) 
            $scope.model = ;
            $scope.selectedFile = [];
            $scope.uploadProgress = 0;

            $scope.uploadFile = function () 
                var file = $scope.selectedFile[0];
                $scope.upload = $upload.upload(
                    url: 'api/upload',
                    method: 'POST',
                    data: angular.toJson($scope.model),
                    file: file
                ).progress(function (evt) 
                    $scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total, 10);
                ).success(function (data) 
                    //do something
                );
            ;

            $scope.onFileSelect = function ($files) 
                $scope.uploadProgress = 0;
                $scope.selectedFile = $files;
            ;
        
    ])
    .directive('progressBar', [
        function () 
            return 
                link: function ($scope, el, attrs) 
                    $scope.$watch(attrs.progressBar, function (newValue) 
                        el.css('width', newValue.toString() + '%');
                    );
                
            ;
        
    ]);
 (angular));

HTML

   

         

                  
                  
                  
                  
                  

                    

                      
                      %
                    
                  

                  
                    
                     
                    Upload File
                  
                
              
            

EDITAR: Se agregó pasar un modelo al servidor en la publicación del archivo.

Los datos del formulario en los elementos de entrada se enviarán en la propiedad de datos de la publicación y estarán disponibles como valores de formulario normales.

Es más eficiente enviar los archivos directamente.

La codificación base64 de Content-Type: multipart/form-data agrega un 33% adicional de gastos generales. Si el servidor lo admite, es más eficiente para enviar los archivos directamente:

Haciendo varios $http.post Solicitudes directamente desde una lista de archivos

$scope.upload = function(url, fileList) 
    var config = 
      headers:  'Content-Type': undefined ,
      transformResponse: angular.identity
    ;
    var promises = fileList.map(function(file) 
      return $http.post(url, file, config);
    );
    return $q.all(promises);
;

Al enviar una POST con un objeto Archivo, es importante configurar 'Content-Type': undefined. El método de envío XHR detectará el objeto Archivo y establecerá automáticamente el tipo de contenido.

Demostración funcional de la directiva “select-ng-files” que funciona con ng-model¹

los El elemento no funciona de forma predeterminada con la directiva ng-model. Necesita una directiva personalizada:

angular.module("app",[]);

angular.module("app").directive("selectNgFiles", function() 
  return 
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) 
      elem.on("change", function(e) 
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      )
    
  
);

  
    
AngularJS Input `type=file` Demo
    
    
    
    
Files
    

      file.name
    
  

Utiliza Nuestro Buscador