Upload de arquivo usando o AngularJS


296

Aqui está o meu formulário HTML:

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

Quero fazer upload de uma imagem da máquina local e quero ler o conteúdo do arquivo carregado. Tudo isso eu quero fazer usando o AngularJS.

Quando tento imprimir, o valor $scope.filevem como indefinido.



Respostas:


344

Algumas das respostas aqui propõem o uso FormData(), mas infelizmente esse é um objeto do navegador não disponível no Internet Explorer 9 e abaixo. Se você precisar oferecer suporte a navegadores antigos, precisará de uma estratégia de backup como usar o <iframe>Flash.

Já existem muitos módulos Angular.js para realizar o upload de arquivos. Esses dois têm suporte explícito para navegadores mais antigos:

E algumas outras opções:

Um deles deve se encaixar no seu projeto ou pode lhe dar algumas dicas sobre como codificá-lo.


4
Mais uma solução (IaaS para upload de arquivos): github.com/uploadcare/angular-uploadcare
David Avsajanishvili

27
EGGHEAD tem um bom vídeo sobre isso - egghead.io/lessons/angularjs-file-uploads
Adam Zerner

2
danialfarid / angular-file-upload é renomeado para ng-file-upload
Michael

5
Resposta de 3 anos. O IE 9 está MORTO agora em 2016.
user2404597

5
Eu acho que você deve atualizar sua resposta para ter uma solução adequada em vez de apontar para links. Esse é o caminho do estouro de pilha. Caso contrário, basta fazer isso como um comentário.
Re: Reynolds #

178

O mais fácil é usar a API HTML5, a saber FileReader

O HTML é bem direto:

<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>

No seu controlador, defina o método 'add':

$scope.add = function() {
    var f = document.getElementById('file').files[0],
        r = new FileReader();

    r.onloadend = function(e) {
      var data = e.target.result;
      //send your binary data via $http or $resource or do anything else with it
    }

    r.readAsBinaryString(f);
}

Compatibilidade do navegador

Navegadores de desktop

Edge 12, Firefox (Gecko) 3.6 (1.9.2), Chrome 7, Opera * 12.02, Safari 6.0.2

Navegadores móveis

Firefox (Gecko) 32, Chrome 3, Opera * 11.5, Safari 6.1

Nota: o método readAsBinaryString () foi descontinuado e readAsArrayBuffer () deve ser usado.


10
FileReader é uma classe da API de arquivos HTML5 padrão w3.org/TR/FileAPI . Permite ler dados do arquivo especificado no elemento de entrada html e processá-los na onloadendfunção de retorno de chamada. Você não precisa de nenhuma biblioteca para usar esta API, ela já está no seu navegador (a menos que você use uma muito antiga). Espero que isto ajude.
yagger

15
O FileReader.readAsBinaryString foi descontinuado em 12 de julho de 2012, Rascunho de Trabalho do W3C.
precisa

13
Você não deve acessar o DOM com angular. É uma prática muito ruim.
Jeanmatthieud

9
@Siderex, não no controlador, mas é totalmente ótimo fazê-lo a partir da diretiva. De fato, é para isso que servem as diretrizes. Você pode ler sobre isso em Documentos angulares docs.angularjs.org/guide/directive
yagger

1
@yagger existe um motivo específico pelo qual seus links fazem referência ao readAsArrayBuffermétodo FileReaderSync (disponível apenas em trabalhadores da Web) em vez da API regular e assíncrona FileReader ?
doldt

58

Esta é a maneira moderna do navegador, sem bibliotecas de terceiros. Funciona em todos os navegadores mais recentes.

 app.directive('myDirective', function (httpPostFactory) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attr) {

            element.bind('change', function () {
                var formData = new FormData();
                formData.append('file', element[0].files[0]);
                httpPostFactory('upload_image.php', formData, function (callback) {
                   // recieve image name to use in a ng-src 
                    console.log(callback);
                });
            });

        }
    };
});

app.factory('httpPostFactory', function ($http) {
    return function (file, data, callback) {
        $http({
            url: file,
            method: "POST",
            data: data,
            headers: {'Content-Type': undefined}
        }).success(function (response) {
            callback(response);
        });
    };
});

HTML:

<input data-my-Directive type="file" name="file">

PHP:

if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {

// uploads image in the folder images
    $temp = explode(".", $_FILES["file"]["name"]);
    $newfilename = substr(md5(time()), 0, 10) . '.' . end($temp);
    move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $newfilename);

// give callback to your angular code with the image src name
    echo json_encode($newfilename);
}

js fiddle (somente front-end) https://jsfiddle.net/vince123/8d18tsey/31/


Como você buscaria o arquivo no nó?
Juicy

Mais detalhes? Você precisa de uma ng-submitação ou de um formulário? Isto por si só não faz nada
Aron

@Emaborsa Olá, adicionei um jsfiddle e fiz um exemplo de código php mais completo. Ele envia a imagem após a alteração do valor da entrada do arquivo, portanto não é necessário enviar ng.
precisa saber é o seguinte

A solução mais simples e perfeita, mas levei anos para descobrir como obter meus serviços WCF para lidar com os dados que estavam sendo carregados. É vital que você pegue o fluxo de dados e passe-o através de algo como o MultiParser para realmente ler os dados do arquivo: stackoverflow.com/a/23702692/391605 Caso contrário, você estará armazenando bytes brutos de "------ WebKitFormBoundary Disposição de conteúdo: ... etc .. "
Mike Gledhill 26/16

Eu precisava adicionar a propriedade 'transformRequest: angular.identity' ao objeto de solicitação $ http, como mostrado por Manoy Ojha um pouco mais abaixo, caso contrário, o Tipo de conteúdo não seria definido corretamente e o exemplo não funcionaria.
Gregor Slavec 24/03

38

Abaixo está um exemplo prático de upload de arquivo:

http://jsfiddle.net/vishalvasani/4hqVu/

Nesta função chamada

setFiles

Do modo de exibição que atualizará a matriz de arquivos no controlador

ou

Você pode verificar o upload do arquivo jQuery usando o AngularJS

http://blueimp.github.io/jQuery-File-Upload/angularjs.html


Oi, eu estava procurando algo através do qual eu posso apenas enviar um arquivo e exibir logo abaixo. No entanto, no seu exemplo, não fui capaz de fazer o mesmo. Não se preocupe, mas eu sou novo nesse angularjs e minha intenção de aprender a realizar esse objetivo específico de uma maneira mais simples e robusta.
Aditya Sethi

Isso ajudou muito. Obrigado!
precisa saber é

Excelente exemplo sem usar uma biblioteca / extensão adicional. Obrigado.
MarkSievers

4
Muito útil, apenas uma observação .. isso usa a API de arquivos que não funciona no IE9 ou abaixo.
ArjaaAine

Alguma idéia de como obtenho erros no resultado? Servidor pode trow um erro e eu gostaria de exibir essa mensagem de erro ...
CularBytes

17

Você pode conseguir arquivo agradável e pasta upload usando flow.js .

https://github.com/flowjs/ng-flow

Confira uma demonstração aqui

http://flowjs.github.io/ng-flow/

Ele não suporta IE7, IE8, IE9, portanto você precisará usar uma camada de compatibilidade

https://github.com/flowjs/fusty-flow.js


O `flow.js 'é fantástico, mas ainda não possui documentação. Preciso manipular um único upload e adicionar visualização e também enviar o botão de evento separado, mas não sei como fazê-lo.
Francis Rodrigues

14

Use o onchangeevento para passar o elemento do arquivo de entrada para sua função.

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

Portanto, quando um usuário seleciona um arquivo, você tem uma referência a ele sem precisar clicar no botão "Adicionar" ou "Enviar".

$scope.fileSelected = function (element) {
    var myFileSelected = element.files[0];
};

2
Isso não está funcionando como desejado. Este é o meu fluxo de trabalho: 1. Atualize a página 2. Adicione um novo arquivo. ** O primeiro arquivo adicionado é sempre indefinido. ** 3. Adicione outro arquivo. A partir de agora, cada arquivo enviado será o arquivo anterior que eu adicionei. Assim, para o segundo arquivo que eu adicionar, este seria carregar o primeiro arquivo que eu adicionei (que na verdade não)
Pulkit Pahwa

1
o melhor método!
Stepan Yakovenko

11

Eu tentei todas as alternativas que o @Anoyz (resposta correta) oferece ... e a melhor solução é https://github.com/danialfarid/angular-file-upload

Algumas funcionalidades:

  • Progresso
  • Arquivos múltiplos
  • Campos
  • Navegadores antigos (IE8-9)

É um bom trabalho para mim. Você só precisa prestar atenção às instruções.

No lado do servidor, uso o middleware NodeJs, Express 4 e Multer para gerenciar solicitações de várias partes.


Como você mostra imagens? No back-end, eles entram com êxito, mas são salvos como nlzt9LJWRrAZEO3ZteZUOgGcmas sem o formato .png. Como adicionar isso?
Saras Arya

9

HTML

<html>
    <head></head>

<body ng-app = "myApp">

  <form ng-controller = "myCtrl">
     <input type = "file" file-model="files" multiple/>
     <button ng-click = "uploadFile()">upload me</button>
     <li ng-repeat="file in files">{{file.name}}</li>
  </form>

Scripts

  <script src = 
     "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script>
    angular.module('myApp', []).directive('fileModel', ['$parse', function ($parse) {
        return {
           restrict: 'A',
           link: function(scope, element, attrs) {
              element.bind('change', function(){
              $parse(attrs.fileModel).assign(scope,element[0].files)
                 scope.$apply();
              });
           }
        };
     }]).controller('myCtrl', ['$scope', '$http', function($scope, $http){


       $scope.uploadFile=function(){
       var fd=new FormData();
        console.log($scope.files);
        angular.forEach($scope.files,function(file){
        fd.append('file',file);
        });
       $http.post('http://localhost:1337/mediaobject/upload',fd,
           {
               transformRequest: angular.identity,
               headers: {'Content-Type': undefined}                     
            }).success(function(d)
                {
                    console.log(d);
                })         
       }
     }]);

  </script>


9

O <input type=file>elemento não funciona por padrão com a diretiva ng-model . Ele precisa de uma diretiva personalizada :

Demonstração de trabalho da select-ng-filesdiretiva que funciona com ng-model1

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);
      })
    }
  }
});
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" select-ng-files ng-model="fileList" multiple>
    
    <h2>Files</h2>
    <div ng-repeat="file in fileList">
      {{file.name}}
    </div>
  </body>


$http.postde um FileList

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

Ao enviar um POST com um objeto File , é importante definir 'Content-Type': undefined. O método de envio XHR detectará o objeto File e definirá automaticamente o tipo de conteúdo.


7

Fácil com uma diretiva

Html:

<input type="file" file-upload multiple/>

JS:

app.directive('fileUpload', function () {
return {
    scope: true,        //create a new scope
    link: function (scope, el, attrs) {
        el.bind('change', function (event) {
            var files = event.target.files;
            //iterate files since 'multiple' may be specified on the element
            for (var i = 0;i<files.length;i++) {
                //emit event upward
                scope.$emit("fileSelected", { file: files[i] });
            }                                       
        });
    }
};

Na diretiva, garantimos que um novo escopo seja criado e, em seguida, ouvimos as alterações feitas no elemento de entrada do arquivo. Quando mudanças são detectadas, emitem um evento para todos os escopos ancestrais (para cima) com o objeto de arquivo como parâmetro.

No seu controlador:

$scope.files = [];

//listen for the file selected event
$scope.$on("fileSelected", function (event, args) {
    $scope.$apply(function () {            
        //add the file object to the scope's files collection
        $scope.files.push(args.file);
    });
});

Então, na sua chamada ajax:

data: { model: $scope.model, files: $scope.files }

http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/


7

Eu acho que este é o upload de arquivo angular:

ng-upload de arquivo

Diretiva JS Angular leve para fazer upload de arquivos.

Aqui está a página DEMO .

  • Suporta o progresso do upload, cancela / interrompe o upload enquanto estiver em andamento, métodos de arrastar e soltar arquivos (html5), arrastar e soltar diretório (webkit), CORS, PUT (html5) / POST, validação do tipo e tamanho do arquivo, mostrar a visualização de imagens selecionadas / áudio / vídeos.
  • Upload de arquivos em vários navegadores e FileReader (HTML5 e não HTML5) com o FileFI de polyfill do Flash. Permite validação / modificação do lado do cliente antes de carregar o arquivo
  • Upload direto para serviços db CouchDB, imgur, etc ... com o tipo de conteúdo do arquivo usando Upload.http (). Isso ativa o evento de progresso para solicitações HTTP POST / PUT angulares.
  • Arquivo de correção separado, os arquivos FileAPI são carregados sob demanda por código não HTML5, o que significa que não há código / carga extra se você precisar apenas de suporte HTML5.
  • Leve usando o $ http normal para fazer o upload (com shim para navegadores não HTML5), para que todos os recursos angulares do http http estejam disponíveis

https://github.com/danialfarid/ng-file-upload


6

Seu arquivo e dados json são enviados ao mesmo tempo.

// FIRST SOLUTION
 var _post = function (file, jsonData) {
            $http({
                url: your url,
                method: "POST",
                headers: { 'Content-Type': undefined },
                transformRequest: function (data) {
                    var formData = new FormData();
                    formData.append("model", angular.toJson(data.model));
                    formData.append("file", data.files);
                    return formData;
                },
                data: { model: jsonData, files: file }
            }).then(function (response) {
                ;
            });
        }
// END OF FIRST SOLUTION

// SECOND SOLUTION
// If you can add plural file and  If above code give an error.
// You can try following code
 var _post = function (file, jsonData) {
            $http({
                url: your url,
                method: "POST",
                headers: { 'Content-Type': undefined },
                transformRequest: function (data) {
                    var formData = new FormData();
                    formData.append("model", angular.toJson(data.model));
                for (var i = 0; i < data.files.length; i++) {
                    // add each file to
                    // the form data and iteratively name them
                    formData.append("file" + i, data.files[i]);
                }
                    return formData;
                },
                data: { model: jsonData, files: file }
            }).then(function (response) {
                ;
            });
        }
// END OF SECOND SOLUTION


4

Você pode usar um FormDataobjeto seguro e rápido:

// Store the file object when input field is changed
$scope.contentChanged = function(event){
    if (!event.files.length)
        return null;

    $scope.content = new FormData();
    $scope.content.append('fileUpload', event.files[0]); 
    $scope.$apply();
}

// Upload the file over HTTP
$scope.upload = function(){
    $http({
        method: 'POST', 
        url: '/remote/url',
        headers: {'Content-Type': undefined },
        data: $scope.content,
    }).success(function(response) {
        // Uploading complete
        console.log('Request finished', response);
    });
}

Você também pode explicar onde 'contentChanged' é usado exatamente?
Marc J. Schmidt

Quando uma entrada de arquivo é alterada, o acionamento dessa função inicia o processo de upload.
Farsheed 07/07

1
Como não há <input type="file" ng-change="contentChanged($event)">, como fazê-lo?
Marc J. Schmidt

3

http://jsfiddle.net/vishalvasani/4hqVu/ funciona bem no chrome e no IE (se você atualizar um pouco o CSS na imagem de fundo). Isso é usado para atualizar a barra de progresso:

 scope.progress = Math.round(evt.loaded * 100 / evt.total)

mas nos dados [percentuais] do FireFox angular não são atualizados com êxito no DOM, embora os arquivos estejam sendo carregados com êxito.


Para o FF, você pode ouvir o loadevento e, se o tamanho for computável, dispare um evento de progresso para indicar o upload bem-sucedido. O github.com/danialfarid/angular-file-upload já cuida disso.
Danial

Está lá, mas no violino dado também é verificado e aplicado. Ainda não há esperança em FF.
precisa saber é o seguinte

Eu acho que se você apenas chamar uploadprogress dentro uploadComplete ele deve trabalhar para FF
danial

NÃO, não existe, e mesmo que exista, você pode explicar por quê? Eu dei um link para mexer no meu post. Se possível, você pode atualizá-lo para trabalhar no FF e comentar o link da solução aqui?
precisa saber é o seguinte

Qual versão do Firefox?
Danial

3

Você pode considerar o IaaS para upload de arquivos, como Uploadcare . Existe um pacote Angular para isso: https://github.com/uploadcare/angular-uploadcare

Tecnicamente, é implementado como uma diretiva, fornecendo opções diferentes para upload e manipulações para imagens carregadas no widget:

<uploadcare-widget
  ng-model="object.image.info.uuid"
  data-public-key="YOURKEYHERE"
  data-locale="en"
  data-tabs="file url"
  data-images-only="true"
  data-path-value="true"
  data-preview-step="true"
  data-clearable="true"
  data-multiple="false"
  data-crop="400:200"
  on-upload-complete="onUCUploadComplete(info)"
  on-widget-ready="onUCWidgetReady(widget)"
  value="{{ object.image.info.cdnUrl }}"
 />

Mais opções de configuração para jogar: https://uploadcare.com/widget/configure/


3

Sei que é uma entrada tardia, mas criei uma diretiva de upload simples. Que você pode começar a trabalhar rapidamente!

<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />

ng-simple-upload mais no Github com um exemplo usando a API da Web.


3

HTML

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

adicione o método 'profileimage ()' ao seu controlador

    $scope.profileimage = function(selectimage) {
      console.log(selectimage.files[0]);
 var selectfile=selectimage.files[0];
        r = new FileReader();
        r.onloadend = function (e) {
            debugger;
            var data = e.target.result;

        }
        r.readAsBinaryString(selectfile);
    }

2

Esta deve ser uma atualização / comentário para a resposta do @ jquery-guru, mas como eu não tenho representante suficiente, ela será apresentada aqui. Ele corrige os erros que agora são gerados pelo código.

https://jsfiddle.net/vzhrqotw/

A mudança é basicamente:

FileUploadCtrl.$inject = ['$scope']
function FileUploadCtrl(scope) {

Para:

app.controller('FileUploadCtrl', function($scope)
{

Sinta-se livre para ir para um local mais apropriado, se desejar.


2

Eu li todos os tópicos e a solução da API HTML5 parecia a melhor. Mas isso altera meus arquivos binários, corrompendo-os de uma maneira que não investiguei. A solução que funcionou perfeitamente para mim foi:

HTML:

<input type="file" id="msds" ng-model="msds" name="msds"/>
<button ng-click="msds_update()">
    Upload
</button>

JS:

msds_update = function() {
    var f = document.getElementById('msds').files[0],
        r = new FileReader();
    r.onloadend = function(e) {
        var data = e.target.result;
        console.log(data);
        var fd = new FormData();
        fd.append('file', data);
        fd.append('file_name', f.name);
        $http.post('server_handler.php', fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
            console.log('success');
        })
        .error(function(){
            console.log('error');
        });
    };
    r.readAsDataURL(f);
}

Lado do servidor (PHP):

$file_content = $_POST['file'];
$file_content = substr($file_content,
    strlen('data:text/plain;base64,'));
$file_content = base64_decode($file_content);

1

Posso fazer upload de arquivos usando o AngularJS usando o código abaixo:

O fileargumento que precisa ser passado para a função ngUploadFileUploadé $scope.fileconforme sua pergunta.

O ponto chave aqui é usar transformRequest: []. Isso impedirá que o $ http mexa no conteúdo do arquivo.

       function getFileBuffer(file) {
            var deferred = new $q.defer();
            var reader = new FileReader();
            reader.onloadend = function (e) {
                deferred.resolve(e.target.result);
            }
            reader.onerror = function (e) {
                deferred.reject(e.target.error);
            }

            reader.readAsArrayBuffer(file);
            return deferred.promise;
        }

        function ngUploadFileUpload(endPointUrl, file) {

            var deferred = new $q.defer();
            getFileBuffer(file).then(function (arrayBuffer) {

                $http({
                    method: 'POST',
                    url: endPointUrl,
                    headers: {
                        "accept": "application/json;odata=verbose",
                        'X-RequestDigest': spContext.securityValidation,
                        "content-length": arrayBuffer.byteLength
                    },
                    data: arrayBuffer,
                    transformRequest: []
                }).then(function (data) {
                    deferred.resolve(data);
                }, function (error) {
                    deferred.reject(error);
                    console.error("Error", error)
                });
            }, function (error) {
                console.error("Error", error)
            });

            return deferred.promise;

        }

0

A resposta acima aceita não é compatível com o navegador. Se alguém tiver um problema de compatibilidade, tente isso.

Violino

Ver Código

 <div ng-controller="MyCtrl">
      <input type="file" id="file" name="file"/>
      <br>
      <button ng-click="add()">Add</button>
      <p>{{data}}</p>
    </div>

Código do controlador

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.data = 'none';    
    $scope.add = function(){
      var f = document.getElementById('file').files[0],
          r = new FileReader();
      r.onloadend = function(e){        
          var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;

for (var i = 0; i < length; i++) 
{
    binary += String.fromCharCode(bytes[i]);
}

$scope.data = (binary).toString();

          alert($scope.data);
      }
      r.readAsArrayBuffer(f);
    }
}

0

em palavras simples

em HTML - adicione apenas o código abaixo

     <form name="upload" class="form" data-ng-submit="addFile()">
  <input type="file" name="file" multiple 
 onchange="angular.element(this).scope().uploadedFile(this)" />
 <button type="submit">Upload </button>
</form>

no controlador - Esta função é chamada quando você clica em " botão de upload de arquivo" . ele fará o upload do arquivo. você pode consolá-lo.

$scope.uploadedFile = function(element) {
$scope.$apply(function($scope) {
  $scope.files = element.files;         
});
}

adicione mais nos controladores - abaixo do código, adicione a função Esta função é chamada quando você clica no botão usado "bater na api (POST)" . ele enviará o arquivo (que foi carregado) e os dados do formulário para o back-end.

var url = httpURL + "/reporttojson"
        var files=$scope.files;

         for ( var i = 0; i < files.length; i++)
         {
            var fd = new FormData();
             angular.forEach(files,function(file){
             fd.append('file',file);
             });
             var data ={
              msg : message,
              sub : sub,
              sendMail: sendMail,
              selectUsersAcknowledge:false
             };

             fd.append("data", JSON.stringify(data));
              $http.post(url, fd, {
               withCredentials : false,
               headers : {
                'Content-Type' : undefined
               },
             transformRequest : angular.identity
             }).success(function(data)
             {
                  toastr.success("Notification sent successfully","",{timeOut: 2000});
                  $scope.removereport()
                   $timeout(function() {
                    location.reload();
                }, 1000);

             }).error(function(data)
             {
              toastr.success("Error in Sending Notification","",{timeOut: 2000});
              $scope.removereport()
             });
        }

neste caso .. eu adicionei o código abaixo como dados do formulário

var data ={
          msg : message,
          sub : sub,
          sendMail: sendMail,
          selectUsersAcknowledge:false
         };

0
<form id="csv_file_form" ng-submit="submit_import_csv()" method="POST" enctype="multipart/form-data">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

No controlador angularJS

$scope.submit_import_csv = function(){

        var formData = new FormData(document.getElementById("csv_file_form"));
        console.log(formData);

        $.ajax({
            url: "import",
            type: 'POST',
            data:  formData,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            success: function(result, textStatus, jqXHR)
            {
            console.log(result);
            }
        });

        return false;
    }

0

Nós usamos HTML, CSS e AngularJS. O exemplo a seguir mostra sobre como fazer upload do arquivo usando o AngularJS.

<html>

   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>

   <body ng-app = "myApp">

      <div ng-controller = "myCtrl">
         <input type = "file" file-model = "myFile"/>
         <button ng-click = "uploadFile()">upload me</button>
      </div>

      <script>
         var myApp = angular.module('myApp', []);

         myApp.directive('fileModel', ['$parse', function ($parse) {
            return {
               restrict: 'A',
               link: function(scope, element, attrs) {
                  var model = $parse(attrs.fileModel);
                  var modelSetter = model.assign;

                  element.bind('change', function(){
                     scope.$apply(function(){
                        modelSetter(scope, element[0].files[0]);
                     });
                  });
               }
            };
         }]);

         myApp.service('fileUpload', ['$http', function ($http) {
            this.uploadFileToUrl = function(file, uploadUrl){
               var fd = new FormData();
               fd.append('file', file);

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

               .success(function(){
               })

               .error(function(){
               });
            }
         }]);

         myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
            $scope.uploadFile = function(){
               var file = $scope.myFile;

               console.log('file is ' );
               console.dir(file);

               var uploadUrl = "/fileUpload";
               fileUpload.uploadFileToUrl(file, uploadUrl);
            };
         }]);

      </script>

   </body>
</html>

Isso vem do TutorialsPoint , mas pelo menos você fez o bom trabalho de corrigir o exemplo deles, que nem pode ser executado por causa de erros óbvios!
Benito

0

Exemplo de trabalho usando diretiva simples ( modelo de arquivo ng ):

.directive("ngFileModel", [function () {
  return {
      $scope: {
          ngFileModel: "="
      },
      link: function ($scope:any, element, attributes) {
          element.bind("change", function (changeEvent:any) {
              var reader = new FileReader();
              reader.onload = function (loadEvent) {
                  $scope.$apply(function () {
                      $scope.ngFileModel = {
                          lastModified: changeEvent.target.files[0].lastModified,
                          lastModifiedDate: changeEvent.target.files[0].lastModifiedDate,
                          name: changeEvent.target.files[0].name,
                          size: changeEvent.target.files[0].size,
                          type: changeEvent.target.files[0].type,
                          data: changeEvent.target.files[0]
                      };
                  });
              }
              reader.readAsDataURL(changeEvent.target.files[0]);
          });
      }
  }
}])

e use FormDatapara fazer upload de arquivo em sua função.

var formData = new FormData();
 formData.append("document", $scope.ngFileModel.data)
 formData.append("user_id", $scope.userId)

todos os créditos vão para https://github.com/mistralworks/ng-file-model

Eu enfrentei um pequeno problema que você pode ver aqui: https://github.com/mistralworks/ng-file-model/issues/7

Finalmente, aqui está um repositório bifurcado: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js


0

O código ajuda a inserir o arquivo

<body ng-app = "myApp">
<form ng-controller="insert_Ctrl"  method="post" action=""  name="myForm" enctype="multipart/form-data" novalidate>
    <div>
        <p><input type="file" ng-model="myFile" class="form-control"  onchange="angular.element(this).scope().uploadedFile(this)">
            <span style="color:red" ng-show="(myForm.myFile.$error.required&&myForm.myFile.$touched)">Select Picture</span>
        </p>
    </div>
    <div>
        <input type="button" name="submit"  ng-click="uploadFile()" class="btn-primary" ng-disabled="myForm.myFile.$invalid" value="insert">
    </div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="insert.js"></script>
</body>

insert.js

var app = angular.module('myApp',[]);
app.service('uploadFile', ['$http','$window', function ($http,$window) {
    this.uploadFiletoServer = function(file,uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(data){
            alert("insert successfull");
            $window.location.href = ' ';//your window location
        })
        .error(function(){
            alert("Error");
        });
    }
}]);
app.controller('insert_Ctrl',  ['$scope', 'uploadFile', function($scope, uploadFile){
    $scope.uploadFile = function() {
        $scope.myFile = $scope.files[0];
        var file = $scope.myFile;
        var url = "save_data.php";
        uploadFile.uploadFiletoServer(file,url);
    };
    $scope.uploadedFile = function(element) {
        var reader = new FileReader();
        reader.onload = function(event) {
            $scope.$apply(function($scope) {
                $scope.files = element.files;
                $scope.src = event.target.result  
            });
        }
        reader.readAsDataURL(element.files[0]);
    }
}]);

save_data.php

<?php
    require "dbconnection.php";
    $ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
    $image = time().'.'.$ext;
    move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$image);
    $query="insert into test_table values ('null','$image')";
    mysqli_query($con,$query);
?>

0

isso funciona

file.html

<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   <body ng-app = "app">
      <div ng-controller = "myCtrl">
         <input type = "file" file-model = "myFile"/>
         <button ng-click = "uploadFile()">upload me</button>
      </div>
   </body>
   <script src="controller.js"></script>
</html>

controller.js

     var app = angular.module('app', []);

     app.service('fileUpload', ['$http', function ($http) {
        this.uploadFileToUrl = function(file, uploadUrl){
           var fd = new FormData();
           fd.append('file', file);

           $http.post(uploadUrl, fd, {
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
           }).success(function(res){
                console.log(res);
           }).error(function(error){
                console.log(error);
           });
        }
     }]);

     app.controller('fileCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
        $scope.uploadFile = function(){
           var file = $scope.myFile;

           console.log('file is ' );
           console.dir(file);

           var uploadUrl = "/fileUpload.php";  // upload url stands for api endpoint to handle upload to directory
           fileUpload.uploadFileToUrl(file, uploadUrl);
        };
     }]);

  </script>

fileupload.php

  <?php
    $ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
    $image = time().'.'.$ext;
    move_uploaded_file($_FILES["file"]["tmp_name"],__DIR__. ' \\'.$image);
  ?>

0

FAZER UPLOAD DE ARQUIVOS

<input type="file" name="resume" onchange="angular.element(this).scope().uploadResume()" ng-model="fileupload" id="resume" />


        $scope.uploadResume = function () { 
            var f = document.getElementById('resume').files[0];
            $scope.selectedResumeName = f.name;
            $scope.selectedResumeType = f.type;
            r = new FileReader();

            r.onloadend = function (e) { 
                $scope.data = e.target.result;
            }

            r.readAsDataURL(f);

        };

DOWNLOAD DE ARQUIVOS:

          <a href="{{applicant.resume}}" download> download resume</a>

var app = angular.module("myApp", []);

            app.config(['$compileProvider', function ($compileProvider) {
                $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
                $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);

            }]);

-1
app.directive('ngUpload', function () {   
  return {    
    restrict: 'A',  
    link: function (scope, element, attrs) {

      var options = {};
      options.enableControls = attrs['uploadOptionsEnableControls'];

      // get scope function to execute on successful form upload
      if (attrs['ngUpload']) {

        element.attr("target", "upload_iframe");
        element.attr("method", "post");

        // Append a timestamp field to the url to prevent browser caching results
        element.attr("action", element.attr("action") + "?_t=" + new Date().getTime());

        element.attr("enctype", "multipart/form-data");
        element.attr("encoding", "multipart/form-data");

        // Retrieve the callback function
        var fn = attrs['ngUpload'].split('(')[0];
        var callbackFn = scope.$eval(fn);
        if (callbackFn == null || callbackFn == undefined || !angular.isFunction(callbackFn))
        {
          var message = "The expression on the ngUpload directive does not point to a valid function.";
          // console.error(message);
          throw message + "\n";
        }                      

        // Helper function to create new  i frame for each form submission
        var addNewDisposableIframe = function (submitControl) {
          // create a new iframe
          var iframe = $("<iframe id='upload_iframe' name='upload_iframe' border='0' width='0' height='0' style='width: 0px; height: 0px;
border: none; display: none' />");

          // attach function to load event of the iframe
          iframe.bind('load', function () {

              // get content - requires jQuery
              var content = iframe.contents().find('body').text();

              // execute the upload response function in the active scope
              scope.$apply(function () { callbackFn(content, content !== "" /* upload completed */); });

              // remove iframe
              if (content != "") // Fixes a bug in Google Chrome that dispose the iframe before content is ready.
                setTimeout(function () { iframe.remove(); }, 250);


              submitControl.attr('disabled', null);
              submitControl.attr('title', 'Click to start upload.');
            });

          // add the new iframe to application
          element.parent().append(iframe);
        };

        // 1) get the upload submit control(s) on the form (submitters must be decorated with the 'ng-upload-submit' class)
        // 2) attach a handler to the controls' click event
        $('.upload-submit', element).click(
          function () {

            addNewDisposableIframe($(this) /* pass the submit control */);

            scope.$apply(function () { callbackFn("Please wait...", false /* upload not completed */); });



            var enabled = true;
            if (options.enableControls === null || options.enableControls === undefined || options.enableControls.length >= 0) {
              // disable the submit control on click
              $(this).attr('disabled', 'disabled');
              enabled = false;
            }

            $(this).attr('title', (enabled ? '[ENABLED]: ' : '[DISABLED]: ') + 'Uploading, please wait...');

            // submit the form
            $(element).submit();
          }
        ).attr('title', 'Click to start upload.');
      }
      else
        alert("No callback function found on the ngUpload directive.");     
    }   
  }; 
});



<form class="form form-inline" name="uploadForm" id="uploadForm"
ng-upload="uploadForm12"  action="rest/uploadHelpFile"  method="post"
enctype="multipart/form-data" style="margin-top: 3px;margin-left:
6px"> <button type="submit" id="mbUploadBtn" class="upload-submit"
ng-hide="true"></button> </form>

@RequestMapping(value = "/uploadHelpFile", method =
RequestMethod.POST)   public @ResponseBody String
uploadHelpFile(@RequestParam(value = "file") CommonsMultipartFile[]
file,@RequestParam(value = "fileName") String
fileName,@RequestParam(value = "helpFileType") String
helpFileType,@RequestParam(value = "helpFileName") String
helpFileName) { }

formate a sua resposta não está no formato correto
Saineshwar
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.