Téléchargement de fichiers en utilisant AngularJS

Question

Téléchargement de fichiers 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 veux télécharger une image à partir d'une machine locale et je veux lire le contenu du fichier téléchargé. Tout ce que je veux faire en utilisant AngularJS.

Lorsque j'essaie d'imprimer la valeur de $scope.file il n'est pas défini.

275

angularjs angularjs-fileupload

demandé sur georgeawg 2013-09-02 14:29:52

29 réponses

score 330 · Answer 1

Certaines des réponses ici proposent d'utiliser FormData(), mais malheureusement c'est un objet de navigateur non disponible dans Internet Explorer 9 et ci-dessous. Si vous avez besoin de prendre en charge ces anciens navigateurs, vous aurez besoin d'une stratégie de sauvegarde telle que <iframe> ou Flash.

Il y a déjà beaucoup angulaire.modules js pour effectuer le téléchargement de fichiers. Ces deux ont un support explicite pour les navigateurs plus anciens:

https://github.com/leon/angular-upload - utilise les iframes comme repli
https://github.com/danialfarid/ng-file-upload - utilise FileAPI / Flash comme solution de Secours

Et quelques autres options:

L'un d'entre eux devrait correspondre à votre projet, ou peut vous en donner aperçu de la façon de coder vous-même.

score 164 · Answer 2

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, Opéra* 12.02, Safari 6.0.2

Navigateurs Mobiles

Firefox (Gecko) 32, Chrome 3, Internet Explorer * 10, Opéra * 11.5, Safari 6.1

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

score 50 · Answer 3

C'est la façon 2015, sans bibliothèques 3ème partie. 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 (uniquement front-end) https://jsfiddle.net/vince123/8d18tsey/31/

score 38 · Answer 4

Ci-dessous est un exemple de travail de téléchargement de fichier:

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

Dans cette fonction appelée

setFiles

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

Ou

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

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

score 17 · Answer 5

Vous pouvez obtenir un bon téléchargement de fichiers et de dossiers en utilisant 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, donc vous devrez éventuellement utiliser une couche de compatibilité

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

score 11 · Answer 6

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

Certaines Fonctionnalités:

Progrès
Multifiles
Champs
anciens navigateurs (IE8-9)

, C'est le travail très bien pour moi. Vous devez juste faire attention aux instructions.

côté serveur, j'utilise NodeJs, Express 4 et Multer middleware pour gérer la requête multipart.

score 9 · Answer 7

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>

score 8 · Answer 8

Utilisez l'événement onchange pour passer 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, sans que l'utilisateur n'ait à cliquer sur un bouton "Ajouter" ou "Télécharger".

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

score 7 · Answer 9

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 nous écoutons les modifications apportées à l'élément d'entrée de fichier. Lorsque des modifications sont détectées avec emit un événement à toutes les étendues ancêtre (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);
    });
});

Puis dans votre ajax appel:

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

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

score 6 · Answer 10

Je pense que c'est le téléchargement de fichier angulaire:

Ng-téléchargement de fichier

Directive JS angulaire légère pour télécharger des fichiers.

Voici la page DEMO .Caractéristiques

prend en charge la progression du téléchargement, annuler / abandonner le téléchargement en cours, glisser-déposer de fichier (html5), glisser-déposer de répertoire (webkit), CORS, mettre(HTML5)/méthodes POST, validation du type et de la taille du fichier, afficher un aperçu des images sélectionnées/audio/vidéos.
Téléchargement de fichiers Cross browser 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 db CouchDB, imgur, etc... avec le type de contenu du fichier en utilisant Upload.http(). Cela active l'événement de progression pour les requêtes HTTP POST/PUT angulaires.
fichier shim séparé, les fichiers FileAPI sont chargés à la demande pour le code non-HTML5, ce qui signifie pas de charge/code supplémentaire si vous avez juste besoin de support HTML5.
léger en utilisant $http régulier pour télécharger (avec shim pour les navigateurs non-HTML5) donc toutes les fonctionnalités $ http angulaires sont disponibles

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

score 6 · Answer 11

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

Travail de Démonstration de `return-files` Directive qui Fonctionne avec `ng-model`¹

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

angular.module("app").directive("returnFiles", 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" return-files ng-model="fileList" multiple>
    
    <h2>Files</h2>
    <div ng-repeat="file in fileList">
      {{file.name}}
    </div>
  </body>

`$http.post` à partir d'une liste de fichiers

$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'une publication avec un objet File , il est important de définir 'Content-Type': undefined. La méthode D'envoi XHR {[10] } détectera alors l'objet File et définissez automatiquement le type de contenu.

score 5 · Answer 12

Votre fichier et vos données json téléchargent 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

score 4 · Answer 13

Vous pouvez utiliser un FormData objet qui est 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);
    });
}

score 3 · Answer 14

Http://jsfiddle.net/vishalvasani/4hqVu / fonctionne bien dans chrome et IE (si vous mettez à jour CSS un peu en arrière-plan-image). 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 dans DOM avec succès, bien que les fichiers soient téléchargés avec succès.

score 3 · Answer 15

Vous pouvez envisager IaaS pour le téléchargement de fichiers, tels que Uploadcare . Il y a un paquet angulaire pour cela: https://github.com/uploadcare/angular-uploadcare

Techniquement, il est implémenté comme une directive, fournissant 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/

score 3 · Answer 16

Je sais que c'est une entrée tardive mais j'ai créé une directive de téléchargement simple. Vous pouvez obtenir de travail 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 L'API Web.

score 3 · Answer 17

HTML

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

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

score 2 · Answer 18

Cela devrait être une mise à jour / commentaire à la réponse de @jQuery-guru mais comme je n'ai pas assez de représentants, il 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 vers un endroit plus approprié si vous le souhaitez.

score 2 · Answer 19

J'ai lu tout le fil et la solution de L'API HTML5 semblait la meilleure. Mais cela change 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:

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

score 1 · Answer 20

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

score 1 · Answer 21

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

Le file pour l'argument qui doit être transmise à la fonction ngUploadFileUpload est $scope.file, comme par 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;

        }

score 0 · Answer 22

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

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

score 0 · Answer 23

Dans des 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 "télécharger le fichier bouton". il va télécharger le fichier. vous pouvez console il.

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

ajouter plus de contrôleurs - ci-dessous de code à ajouter dans la fonction . Cette fonction est appelée lorsque vous cliquez sur le bouton qui est utilisé " frapper l'api (POST)". il va envoyer fichier (qui a téléchargé) et form-data 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
         };

score 0 · Answer 24

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>

score 0 · Answer 25

Exemple de Travail, en utilisant de Simples Directive (ng-fichier-modèle):

.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 utiliser 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 fourchu: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js

score 0 · Answer 26

Le code permet d'insérer un 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>

Insérer.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);
?>

score 0 · Answer 27

Cela fonctionne

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>

Contrôleur.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);
  ?>

score 0 · Answer 28

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

        };

TÉLÉCHARGER LES 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):/);

            }]);

score -1 · Answer 29

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

Las etiquetas más populares

Téléchargement de fichiers en utilisant AngularJS

29 réponses

HTML

Scripts

Ng-téléchargement de fichier

Travail de Démonstration de return-files Directive qui Fonctionne avec ng-model1

$http.post à partir d'une liste de fichiers

Travail de Démonstration de `return-files` Directive qui Fonctionne avec `ng-model`¹

`$http.post` à partir d'une liste de fichiers