it-swarm.com.de

Datei-Upload mit AngularJS

Hier ist mein HTML-Formular:

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

Ich möchte ein Bild von einem lokalen Computer hochladen und den Inhalt der hochgeladenen Datei lesen. All das möchte ich mit AngularJS machen.

Wenn ich versuche, den Wert von $scope.file auszudrucken, ist er nicht definiert.

288
Aditya Sethi

In einigen Antworten wird die Verwendung von FormData() vorgeschlagen. Leider ist dies ein Browserobjekt, das in Internet Explorer 9 und darunter nicht verfügbar ist. Wenn Sie ältere Browser unterstützen müssen, benötigen Sie eine Sicherungsstrategie wie <iframe> oder Flash.

Es gibt bereits viele Angular.js-Module zum Hochladen von Dateien. Diese beiden unterstützen ältere Browser ausdrücklich:

Und einige andere Optionen:

Eine davon sollte zu Ihrem Projekt passen oder Ihnen einen Einblick geben, wie Sie sie selbst codieren können.

342
Anoyz

Am einfachsten ist es, die HTML5-API zu verwenden, nämlich FileReader

HTML ist ziemlich einfach:

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

Definieren Sie in Ihrem Controller die Methode '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);
}

Browserkompatibilität

Desktop-Browser

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

Mobile Browser

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

Hinweis: Die Methode readAsBinaryString () ist veraltet und readAsArrayBuffer () sollte stattdessen verwendet werden.

175
yagger

Dies ist die moderne Browser-Methode ohne Bibliotheken von Drittanbietern. Funktioniert mit allen aktuellen Browsern.

 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 (nur Front-End) https://jsfiddle.net/vince123/8d18tsey/31/

56
Vince Verhoeven

Unten sehen Sie ein funktionierendes Beispiel für das Hochladen von Dateien:

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

In dieser Funktion aufgerufen

setFiles

Aus Ansicht, mit der das Dateifeld im Controller aktualisiert wird

oder

Sie können das Hochladen von jQuery-Dateien mit AngularJS überprüfen

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

38
JQuery Guru

Sie können einen netten Datei- und Ordner-Upload mit flow.js erreichen.

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

Schauen Sie sich hier eine Demo an

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

IE7, IE8, IE9 werden nicht unterstützt, daher müssen Sie eventuell eine Kompatibilitätsebene verwenden

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

17
Fizer Khan

Verwenden Sie das Ereignis onchange, um das Element der Eingabedatei an Ihre Funktion zu übergeben.

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

Wenn ein Benutzer eine Datei auswählt, haben Sie einen Verweis darauf, ohne dass der Benutzer auf die Schaltfläche "Hinzufügen" oder "Hochladen" klicken muss.

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

Ich habe alle Alternativen ausprobiert, die @Anoyz (Richtige Antwort) gibt ... und die beste Lösung ist https://github.com/danialfarid/angular-file-upload

Einige Eigenschaften:

  • Fortschritt
  • Multifiles
  • Felder
  • Alte Browser (IE8-9)

Es funktioniert gut für mich. Sie müssen nur die Anweisungen beachten.

Auf der Serverseite verwende ich NodeJs, Express 4 und Multer Middleware, um mehrteilige Anfragen zu verwalten.

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>

Skripte

  <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

Das <input type=file> -Element funktioniert standardmäßig nicht mit der ng-model-Direktive . Es benötigt eine benutzerdefinierte Direktive :

Arbeitsdemo von return-files Direktive, die mit ng-model funktioniert1

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

Wenn Sie ein POST mit einem Dateiobjekt senden, müssen Sie 'Content-Type': undefined einstellen. Die XHR-Sendemethode erkennt dann das Dateiobjekt und stellt den Inhaltstyp automatisch ein.

8
georgeawg

Einfach mit einer Direktive

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

In der Direktive stellen wir sicher, dass ein neuer Gültigkeitsbereich erstellt wird, und warten dann auf Änderungen, die am Dateieingabeelement vorgenommen wurden. Wenn Änderungen erkannt werden, wird mit dem Dateiobjekt als Parameter ein Ereignis an alle übergeordneten Bereiche (aufwärts) gesendet.

In Ihrem Controller:

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

Dann in Ihrem Ajax-Anruf:

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

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

7
Asher

ich denke, dies ist der angular Datei-Upload:

ng-Datei-Upload

Lightweight Angular JS-Direktive zum Hochladen von Dateien.

Hier ist die DEMO Seite

  • Unterstützt Upload-Fortschritt, Abbrechen/Abbrechen des Uploads während des Vorgangs, Drag & Drop von Dateien (HTML5), Drag & Drop von Verzeichnissen (Webkit), CORS, PUT (HTML5)/POST-Methoden, Validierung von Dateityp und -größe, Vorschau ausgewählter Bilder/audio/videos.
  • Browserübergreifender Dateiupload und FileReader (HTML5 und Nicht-HTML5) mit Flash Polyfill FileAPI. Ermöglicht die clientseitige Überprüfung/Änderung vor dem Hochladen der Datei
  • Direkter Upload zu db services CouchDB, imgur, etc ... mit dem Inhaltstyp der Datei unter Verwendung von Upload.http (). Dies aktiviert das Fortschrittsereignis für angular http POST/PUT-Anforderungen.
  • Separate Shim-Datei, FileAPI-Dateien werden bei Bedarf für Nicht-HTML5-Code geladen, was bedeutet, dass kein zusätzliches Laden/Code erforderlich ist, wenn Sie nur HTML5-Unterstützung benötigen.
  • Leichtgewichtig mit normalem $ http zum Hochladen (mit Shim für Nicht-HTML5-Browser), sodass alle angular $ http-Funktionen verfügbar sind

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

Ihre Datei und Ihre JSON-Daten werden gleichzeitig hochgeladen.

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

Sie können ein FormData -Objekt verwenden, das sicher und schnell ist:

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

Ich weiß, dass dies ein verspäteter Eintrag ist, habe aber eine einfache Upload-Direktive erstellt. Was Sie in kürzester Zeit arbeiten können!

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

ng-simple-upload mehr zu Github mit einem Beispiel unter Verwendung der Web-API.

3
shammelburg

http://jsfiddle.net/vishalvasani/4hqVu/ funktioniert gut in chrome und IE (wenn Sie CSS im Hintergrundbild ein wenig aktualisieren). Dies wird für die Aktualisierung des Fortschrittsbalkens verwendet:

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

in FireFox werden die [Prozent] -Daten von angle jedoch nicht erfolgreich in DOM aktualisiert, obwohl die Dateien erfolgreich hochgeladen werden.

3
mayankcpdixit

Sie können IaaS für das Hochladen von Dateien in Betracht ziehen, z. B. ploadcare . Es gibt ein Angular -Paket dafür: https://github.com/uploadcare/angular-uploadcare

Technisch ist es als Direktive implementiert und bietet verschiedene Optionen zum Hochladen und Manipulationen für hochgeladene Bilder im 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 }}"
 />

Weitere Konfigurationsoptionen zum Spielen: https://uploadcare.com/widget/configure/

HTML

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

fügen Sie Ihrem Controller die Methode 'profileimage ()' hinzu

    $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

Ich habe den ganzen Thread gelesen und die HTML5-API-Lösung sah am besten aus. Aber es ändert meine Binärdateien und beschädigt sie auf eine Weise, die ich nicht untersucht habe. Die Lösung, die für mich perfekt funktionierte, war:

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

Serverseite (PHP):

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

Dies sollte ein Update/Kommentar zu @ jquery-gurus Antwort sein, aber da ich nicht genug Repräsentanten habe, wird es hier hingehen. Es behebt die Fehler, die jetzt vom Code generiert werden.

https://jsfiddle.net/vzhrqotw/

Die Änderung ist im Grunde:

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

Zu:

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

Sie können sich auf Wunsch auch an einen geeigneteren Ort begeben.

2
SKR

Ich kann Dateien mit AngularJS mithilfe des folgenden Codes hochladen:

Das file für das Argument, das für die Funktion ngUploadFileUpload übergeben werden muss, ist $scope.file gemäß Ihrer Frage.

Der entscheidende Punkt hierbei ist die Verwendung von transformRequest: []. Dies verhindert, dass $ http mit dem Inhalt der Datei in Konflikt gerät.

       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

Die oben angegebene Antwort ist nicht browserkompatibel. Wenn jemand Kompatibilitätsprobleme hat, versuchen Sie dies.

Geige

Code anzeigen

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

Controller-Code

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

Wir haben HTML, CSS und AngularJS verwendet. Das folgende Beispiel zeigt, wie die Datei mit AngularJS hochgeladen wird.

<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

in einfachen Worten

in HTML - nur den folgenden Code hinzufügen

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

in der Steuerung - Diese Funktion wird aufgerufen, wenn Sie auf "Upload File Button" klicken. Es wird die Datei hochladen. Sie können es trösten.

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

Weitere Controller hinzufügen - Unter Code der Funktion hinzufügen. Diese Funktion wird aufgerufen, wenn Sie auf die Schaltfläche klicken, die verwendet wird "Schlagen der API (POST)". Es wird eine Datei (welche hochgeladen wurde) und Formulardaten an das Backend senden.

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

in diesem Fall habe ich folgenden Code als Formulardaten hinzugefügt

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

Arbeitsbeispiel mit einfacher Direktive ( 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]);
          });
      }
  }
}])

und verwenden Sie FormData, um die Datei in Ihrer Funktion hochzuladen.

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

alle Credits gehen an https://github.com/mistralworks/ng-file-model

Ich habe ein kleines Problem, das Sie hier überprüfen können: https://github.com/mistralworks/ng-file-model/issues/7

Zum Schluss gibt es noch ein gespaltenes Repo: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js

0
Abdallah Okasha

DATEN HOCHLADEN

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

        };

DATEIEN HERUNTERLADEN:

          <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

das funktioniert

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

Der Code hilft beim Einfügen von Dateien

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

In AngularJS-Controller

$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