web-dev-qa-db-fra.com

Téléchargement de fichier en utilisant AngularJS

Voici mon formulaire HTML:

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

Je souhaite télécharger une image à partir d'un ordinateur local et lire le contenu du fichier téléchargé. Tout ce que je veux faire avec AngularJS.

Lorsque j'essaie d'imprimer la valeur de $scope.file, elle est indéfinie.

288
Aditya Sethi

Certaines des réponses suggèrent d'utiliser FormData(), mais il s'agit malheureusement d'un objet de navigateur non disponible dans Internet Explorer 9 et inférieur. Si vous devez prendre en charge ces navigateurs plus anciens, vous aurez besoin d’une stratégie de sauvegarde telle que l’utilisation de <iframe> ou de Flash.

Il existe déjà de nombreux modules Angular.js pour effectuer le téléchargement de fichiers. Ces deux ont un support explicite pour les anciens navigateurs:

Et quelques autres options:

L'un d'entre eux devrait correspondre à votre projet ou vous donner une idée de la manière de le coder vous-même.

342
Anoyz

Le plus simple est d’utiliser l’API HTML5, à savoir FileReader

HTML est assez simple:

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

Dans votre contrôleur, définissez la méthode '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);
}

Compatibilité du navigateur

Navigateurs de bureau

Firefox (Gecko) 3.6 (1.9.2), Chrome 7, Internet Explorer * 10, Opera * 12.02, Safari 6.0.2

Navigateurs mobiles

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

Remarque: La méthode readAsBinaryString () est obsolète et readAsArrayBuffer () doit être utilisé à la place.

175
yagger

C'est la méthode de navigation moderne, sans bibliothèques tierces. Fonctionne sur tous les derniers navigateurs.

 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 (seulement front-end) https://jsfiddle.net/vince123/8d18tsey/31/

56
Vince Verhoeven

Vous trouverez ci-dessous un exemple pratique de téléchargement de fichier:

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

Dans cette fonction appelée

setFiles

Depuis la vue qui mettra à jour le tableau de fichiers dans le contrôleur

ou

Vous pouvez vérifier le téléchargement de fichier jQuery en utilisant AngularJS

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

38
JQuery Guru

Vous pouvez télécharger des fichiers et des dossiers Nice à l’aide de flow.js .

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

Découvrez une démo ici

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

Il ne supporte pas IE7, IE8, IE9, vous devrez donc éventuellement utiliser un calque de compatibilité.

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

17
Fizer Khan

Utilisez l'événement onchange pour transmettre l'élément de fichier d'entrée à votre fonction.

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

Ainsi, lorsqu'un utilisateur sélectionne un fichier, vous avez une référence à celui-ci sans que l'utilisateur ait besoin de cliquer sur un bouton "Ajouter" ou "Télécharger".

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

J'ai essayé toutes les alternatives proposées par @Anoyz (bonne réponse) ... et la meilleure solution est https://github.com/danialfarid/angular-file-upload

Certaines fonctionnalités:

  • Le progrès
  • Multifiles
  • Des champs
  • Vieux navigateurs (IE8-9)

Cela fonctionne bien pour moi. Vous devez juste faire attention aux instructions.

Du côté serveur, j'utilise NodeJs, le middleware Express 4 et Multer pour gérer les requêtes en plusieurs parties.

11

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>

Les 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
Manoj Ojha

L'élément <input type=file> ne fonctionne pas par défaut avec la directive ng-model . Il faut un directive personnalisée :

Démonstration de travail de return-files Directive fonctionnant avec 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.post à partir d'un 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);
};

Lors de l'envoi d'un POST avec un objet File , il est important de définir 'Content-Type': undefined. Le méthode d'envoi XHR détectera alors le objet Fichier et définira automatiquement le type de contenu.

8
georgeawg

Facile avec une directive

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

Dans la directive, nous nous assurons qu'une nouvelle portée est créée, puis écoutons les modifications apportées à l'élément d'entrée du fichier. Lorsque des modifications sont détectées avec émettre un événement à toutes les étendues d'ancêtres (vers le haut) avec l'objet fichier en tant que paramètre.

Dans votre contrôleur:

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

Ensuite, dans votre appel 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
Asher

je pense que ceci est le angular upload de fichier:

ng-file-upload

Lightweight Angular JS directive pour télécharger des fichiers.

Voici le DEMO page.Features

  • Prend en charge la progression du téléchargement, annule/annule le téléchargement en cours, glisser-déposer de fichier (html5), glisser-déposer de répertoire (webkit), méthodes CORS, PUT (html5)/POST, validation du type et de la taille du fichier, afficher l'aperçu des images sélectionnées/audio/vidéos.
  • Transfert de fichiers entre navigateurs et FileReader (HTML5 et non HTML5) avec Flash polyfill FileAPI. Permet la validation/modification côté client avant de télécharger le fichier
  • Téléchargement direct vers les services de base de données CouchDB, imgur, etc ... avec le type de contenu du fichier à l'aide de Upload.http (). Cela active l'événement progress pour les demandes angular http POST/PUT.
  • Fichier shim séparé, les fichiers FileAPI sont chargés à la demande pour du code non-HTML5, ce qui signifie qu'aucune charge/code supplémentaire n'est nécessaire si vous avez juste besoin de la prise en charge de HTML5.
  • Léger avec $ http habituel à télécharger (avec shim pour les navigateurs non HTML5) afin que toutes les fonctionnalités de angular $ http soient disponibles

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

7

Votre fichier et vos données json sont téléchargés en même temps.

// 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
// İf you can add plural file and  İf 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
5
barış çıracı

Vous pouvez utiliser un objet FormData qui soit sûr et rapide:

// 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);
    });
}
4
Farsheed

Je sais que c'est une entrée tardive, mais j'ai créé une directive de téléchargement simple. Que vous pouvez travailler en un rien de temps!

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

ng-simple-upload plus sur Github avec un exemple utilisant Web API.

3
shammelburg

http://jsfiddle.net/vishalvasani/4hqVu/ fonctionne très bien dans chrome et IE (si vous mettez à jour CSS un peu dans l'image d'arrière-plan). Ceci est utilisé pour mettre à jour la barre de progression:

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

mais dans [FireFox] angular [pour cent], les données ne sont pas mises à jour correctement dans DOM, bien que les fichiers soient correctement téléchargés.

3
mayankcpdixit

Vous pouvez envisager IaaS pour le téléchargement de fichiers, tel que ploadcare . Il existe un package Angular pour cela: https://github.com/uploadcare/angular-uploadcare

Techniquement, il est implémenté sous forme de directive, offrant différentes options pour le téléchargement et des manipulations pour les images téléchargées dans le 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 }}"
 />

Plus d’options de configuration pour jouer avec: https://uploadcare.com/widget/configure/

3

HTML

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

ajoute la méthode 'profileimage ()' à votre contrôleur

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

J'ai lu tout le fil et la solution de l'API HTML5 semblait être la meilleure. Mais cela modifie mes fichiers binaires, les corrompant d’une manière que je n’ai pas étudiée. La solution qui a parfaitement fonctionné pour moi était la suivante:

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

Côté serveur (PHP):

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

Cela devrait être une mise à jour/un commentaire de la réponse de @ jquery-guru mais comme je n’ai pas assez de représentants, cela ira ici. Il corrige les erreurs qui sont maintenant générées par le code.

https://jsfiddle.net/vzhrqotw/

Le changement est fondamentalement:

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

À:

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

N'hésitez pas à vous déplacer si vous le souhaitez.

2
SKR

Je suis capable de télécharger des fichiers en utilisant AngularJS en utilisant le code ci-dessous:

La file de l'argument devant être passé pour la fonction ngUploadFileUpload est $scope.file selon votre question.

Le point clé ici est d’utiliser transformRequest: []. Cela empêchera $ http de jouer avec le contenu du fichier.

       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;

        }
1
Karthik

La réponse acceptée ci-dessus n’est pas compatible avec le navigateur. Si quelqu'un a un problème de compatibilité, essayez ceci.

violon

Voir le code

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

Code du contrôleur

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
Kurkula

Nous avons utilisé HTML, CSS et AngularJS. L'exemple suivant montre comment télécharger le fichier en utilisant 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>
0
Jignesh Mesvaniya

en mots simples

en HTML - ajouter le code ci-dessous uniquement

     <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>

dans le contrôleur - Cette fonction est appelée lorsque vous cliquez sur "bouton de téléchargement du fichier". il va télécharger le fichier. vous pouvez le consoler.

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

ajouter plus de contrôleurs - code ci-dessous ajouter dans la fonction. Cette fonction est appelée lorsque vous cliquez sur le bouton utilisé "frapper l'api (POST)". il enverra le fichier (qui a été téléchargé) et les données de formulaire au backend.

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

dans ce cas .. j'ai ajouté ci-dessous le code en tant que données de formulaire

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

Exemple de travail utilisant une directive simple ( ng-file-model ):

.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]);
          });
      }
  }
}])

et utilisez FormData pour télécharger le fichier dans votre fonction.

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

tous les crédits vont pour https://github.com/mistralworks/ng-file-model

J'ai fait face à un petit problème, vous pouvez le vérifier ici: https://github.com/mistralworks/ng-file-model/issues/7

Enfin, voici un repo forké: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js

0
Abdallah Okasha

TÉLÉCHARGER DES FICHIERS

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

        };

TELECHARGER DES FICHIERS:

          <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):/);

            }]);
0
D C

cela marche

fichier.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

Le code aidera à insérer le fichier

<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
Hajis Hakkim
<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>

Dans le contrôleur 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
rubyshine72