AngularJS: Wie implementiert man einen einfachen Datei-Upload mit mehrteiliger Form?

Möchte ich eine einfache multipart-form-post von AngularJS ein node.js server,
sollte das Formular enthält ein JSON-Objekt in einem Teil und ein Bild, in dem anderen Teil,
(Ich bin derzeit posting nur das JSON-Objekt mit $resource)

Dachte ich, ich sollte anfangen mit input type="file", dann aber herausgefunden, dass AngularJS nicht binden..

alle die Beispiele, die ich finden kann, sind für wraping jQuery-plugins für drag & drop. Ich möchte ein einfaches hochladen einer Datei.

Ich bin neu in AngularJS und sich nicht wohl fühlen, überhaupt mit dem schreiben meiner eigenen Richtlinien.

InformationsquelleAutor der Frage Gal Ben-Haim | 2012-12-19

angularjs angularjs-fileupload

173

Eine wirklich funktionierende Lösung, die keine weiteren Abhängigkeiten als angularjs (getestet mit v. 1.0.6)

html
```
<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>
```
Angularjs (1.0.6) nicht unterstützt ng-model auf "input-file" - tags, so dass Sie es zu tun haben in einen "native-Weg", den pass, die alle (irgendwann) ausgewählte Dateien des Benutzers.

controller
```
$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );

};
```
Der interessante Teil ist die undefined content-type und die transformRequest: eckig.Identitätdass bei der $http die Fähigkeit, das Rechte zu wählen "content-type" und verwalten der Grenze notwendig, wenn Umgang mit multipart-Daten.

InformationsquelleAutor der Antwort Fabio Bonfante

Können Sie die einfache/leichte ng-Datei-upload Richtlinie.
Es unterstützt drag&drop, Datei-Fortschritt und Datei-upload für nicht-HTML5-Browser mit flash-FileAPI shim

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
  Upload.upload({
    url: 'my/upload/url',
    file: $files,            
  }).progress(function(e) {
  }).then(function(data, status, headers, config) {
    //file is uploaded successfully
    console.log(data);
  }); 

}];

InformationsquelleAutor der Antwort danial

5

Hatte ich gerade dieses Problem. Also es gibt ein paar Ansätze. Die erste ist, dass neue Browser unterstützen die
```
var formData = new FormData();
```
Folgen Sie diesem link zu einem blog mit Infos über , wie die Unterstützung beschränkt sich auf modernen Browsern, aber sonst ist es völlig löst dieses Problem.

Sonst kannst du das Formular an ein iframe mit dem Attribut target.
Wenn Sie nach der form sicherstellen, dass das Ziel ein iframe mit dem display-Eigenschaft auf none gesetzt.
Das target ist der name des iFrames. (Nur damit Sie wissen).

Ich hoffe, das hilft

InformationsquelleAutor der Antwort Edgar Martinez
2

Ich weiß, das ist ein verspäteter Eintrag, aber ich habe eine einfache upload-Richtlinie. Die Sie bekommen können die Arbeit in kürzester Zeit!
```
<input type="file" multiple ng-simple-upload web-api-url="/api/post" callback-fn="myCallback" />
```
ng-einfach-upload mehr auf Github mit einem Beispiel mit Hilfe der Web-API.

InformationsquelleAutor der Antwort shammelburg

Sie hochladen könnte über $resource durch zuweisen von Daten, params Attribut der Ressource actions etwa so:

$scope.uploadFile = function(files) {
    var fdata = new FormData();
    fdata.append("file", files[0]);

    $resource('api/post/:id', { id: "@id" }, {
        postWithFile: {
            method: "POST",
            params: fdata,
            transformRequest: angular.identity,
            headers: { 'Content-Type': undefined }
        }
    }).postWithFile(fdata).$promise.then(function(response){
         //successful 
    },function(error){
        //error
    });
};

InformationsquelleAutor der Antwort Digitlimit

0

Schrieb ich einfach eine einfache Richtlinie aus der vorhandenen natürlich) für einen einfachen uploader in AngularJs.

(Die genaue jQuery uploader plugin ist https://github.com/blueimp/jQuery-File-Upload)

Eine Einfache Uploader mit AngularJs (mit CORS-Implementierung)

(Obwohl der server-Seite ist für PHP, können Sie einfach ändern Sie den Knoten auch)

InformationsquelleAutor der Antwort sk8terboi87 ツ
0

Ich hinzufügen möchte, eine alternative. Unter Verwendung des angular-Datei-upload.
Sie können eine Erklärung finden:

Finden Sie eine detaillierte Erklärung hier: https://github.com/nervgh/angular-file-upload Ein Beispiel: https://github.com/nervgh/angular-file-upload/tree/master/examples/simple

InformationsquelleAutor der Antwort Leo Much

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.