AngularJS Hochladen eines Bildes mit ng-upload

Question

Ich versuche eine Datei in AngularJS mit ng-upload hochzuladen, aber ich habe Probleme. Mein HTML sieht wie folgt aus:

<div class="create-article" ng-controller="PostCreateCtrl"> 
     <form ng-upload method="post" enctype="multipart/form-data" action="/write" > 
      <fieldset> 
       <label>Category</label> 
       <select name="category_id" class=""> 
        <option value="0">Select A Category</option> 
        <?php foreach($categories as $category): ?> 
         <option value="<?= $category -> category_id; ?>"><?= $category -> category_name; ?></option> 
        <?php endforeach; ?> 
       </select> 

       <label>Title</label> 
       <input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value="<?= $post -> post_title; ?>" /> 

       <label>Attach Image</label> 
       <input type="file" name="post_image" /> 

       <a href='javascript:void(0)' class="upload-submit: uploadPostImage(contents, completed)" >Crop Image</a> 

       <label>Body</label> 
       <div id="container"> 
       <textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."><?= $post -> post_content; ?></textarea> 
       </div> 
       <div style='clear:both;'></div> 
       <label>Preview</label> 
       <div id='textarea-preview'></div> 

      </fieldset> 
      <div class="span7" style="margin: 0;"> 
       <input type="submit" class="btn btn-success" value="Create Post" /> 
      <input type="submit" class="btn btn-warning pull-right draft" value="Save as Draft" /> 
      </div> 

     </form> 
    </div> 

Und mein js Controller sieht wie folgt aus:

ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel', 
function($scope, PostModel) { 

    $scope.uploadPostImage = function(contents, completed) { 
     console.log(completed); 
     alert(contents); 
    } 

}]); 

Das Problem, das ich bin vor, wenn die Ernte Bild getroffen wird und es führt uploadPostImage, es lädt die gesamte Form . Nicht erwünschtes Verhalten, aber ich kann es zum Laufen bringen. Das große Problem ist in der js die Funktion uploadPostImage 'contents' Parameter ist immer undefiniert, auch wenn der Parameter 'completed' als wahr zurückkommt.

Ziel ist es, nur ein Bild zum Zuschneiden hochzuladen. Was mache ich falsch in diesem Prozess?

Answer 1

Es gibt wenig - keine Dokumentation zum eckigen Hochladen von Dateien. Viele Lösungen erfordern benutzerdefinierte Direktiven andere Abhängigkeiten (jquery in primis ... nur um eine Datei hochzuladen ...). Nach vielen Versuchen habe ich mit diesem nur AngularJS (getestet auf v.1.0.6)

html

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

AngularJS (1.0.6) nicht unterstützen ng-Modell auf „Eingang gefunden "Datei" -Tags, so dass Sie es auf "native-Weise" tun müssen, die alle (eventuell) ausgewählten Dateien vom Benutzer übergeben.

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

}; 

Das kühle Teil ist die undefined Content-Typ und die transformRequest: angular.identity, die die Fähigkeit an den $ http das Recht geben, „Content-Type zu wählen "und verwalten die Grenze, die beim Umgang mit mehrteiligen Daten benötigt wird.

Answer 2

Sie können versuchen ng-file-upload angularjs Plugin.

Es ist ziemlich einfach zu Setup und Umgang mit angularjs Besonderheiten. Es unterstützt auch Fortschritt, Abbrechen, Drag & Drop und ist Cross-Browser.

html

<!-- Note: MUST BE PLACED BEFORE angular.js--> 
<script src="ng-file-upload-shim.min.js"></script> 
<script src="angular.min.js"></script> 
<script src="ng-file-upload.min.js"></script> 

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

JS:

//inject angular file upload directives and service. 
angular.module('myApp', ['angularFileUpload']); 

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { 
    $scope.onFileSelect = function($files) { 
    //$files: an array of files selected, each file has name, size, and type. 
    for (var i = 0; i < $files.length; i++) { 
     var file = $files[i]; 
     $scope.upload = $upload.upload({ 
     url: 'server/upload/url', //upload.php script, node.js route, or servlet url 
     data: {myObj: $scope.myModelObj}, 
     file: file, 
     }).progress(function(evt) { 
     console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
     }).success(function(data, status, headers, config) { 
     // file is uploaded successfully 
     console.log(data); 
     }); 
    } 
    }; 
}]; 

Answer 3

In meinem Fall oben genannten Methoden mit PHP gut funktionieren, aber wenn ich versuche, Dateien in node.js mit diesen Methoden laden dann habe ich ein Problem . Anstatt $ http ({.., .., ...}) zu verwenden, verwenden Sie den normalen jquery ajax.

Für ausgewählte Datei verwenden diese

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

Und Controller

$scope.uploadFile = function(element) { 
var data = new FormData(); 
data.append('file', $(element)[0].files[0]); 
jQuery.ajax({ 
     url: 'brand/upload', 
     type:'post', 
     data: data, 
     contentType: false, 
     processData: false, 
     success: function(response) { 
     console.log(response); 
     }, 
     error: function(jqXHR, textStatus, errorMessage) { 
     alert('Error uploading: ' + errorMessage); 
     } 
}); 
}; 

Answer 4

Fehler beim Hochladen der Datei: "Container hat keine Methode Handhabung POST"

App.service('fileUpload', ['$http', function($http) { 
    this.uploadFileToUrl = function(file, uploadUrl) { 
     console.log("inside upload file service js "); 
     var fd = new FormData(); 
     fd.append('file', file); 

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

       console.log("file uploaded sucessfully " + response); 

      }) 
      .error(function(error) { 

       console.log("Error while uploading file " + JSON.stringify(error)); 
      }); 
    } 
}]); 

{ "Fehler ": {" name ":" Error "," status ": 404," message ":" Shared class \ "container \" hat keine Methode handl POST/5555-1111 "," statusCode ": 404," stack ":" Fehler: