Bild hochladen zu analysieren AngularJS Form

Question

Einfache Frage laden verwenden, wie ein AngularJS Upload-Formular zu Parse.com schaffen?
Ich versuche, ein Profilbild Uploader Form zu erstellen, um diese stackoverflow answer mit verwenden, aber es funktioniert nicht

HTML-Code

<div class="col-lg-9" ng-controller="manageProfile"> 
    <form style="margin-top:80px"> 
     <div class="form-group"> 
      <label>Browse for Picture</label> 
      <input type="file" name="profPic" id="profPic"></input> 
     </div> 
     <button class="btn btn-md" ng-click="uploadPicture()">Upload Picture</button> 
    </form> 
</div> 

AngularJS Code

profile.controller('manageProfile', ['$scope', function($scope) { 
$scope.uploadPicture = function() { 
    var fileUploadControl = $("#profPic")[0]; 
    var file = fileUploadControl.file[0]; 
    var name = file.name; 
    var parseFile = new Parse.File(name, file); 

    parseFile.save().then(function() { 
     var currentUser = Parse.User.current(); 
     currentUser.set("profilePicture", parseFile); 
     currentUser.save(); 
    }, function(error) { 
     alert("Error: " + error.code + ' ' + error.message); 
    }); 
} 

ich diesen Fehler bekam, als zu versuchen, Hochladen

error: fileuploadcontrol is undefined 

Answer 1

In AngularJS verwenden Eingabeelemente die Direktive ng-model, um Eingaben an eine Bereichsvariable zu binden.

<div class="col-lg-9" ng-controller="manageProfile"> 
    <form style="margin-top:80px"> 
     <div class="form-group"> 
      <label>Browse for Picture</label> 
       <!-- add ng-model directive --> 
      <input ng-model="fileName" type="file" name="profPic" id="profPic"></input> 
     </div> 
     <button class="btn btn-md" ng-click="uploadPicture()">Upload Picture</button> 
    </form> 
</div> 

In der Steuerung:

profile.controller('manageProfile', ['$scope', function($scope) { 
    $scope.uploadPicture = function() { 
     /* replace this 
     var fileUploadControl = $("#profPic")[0]; 
     var file = fileUploadControl.file[0]; 
     var name = file.name; 
     */ 
     //Use ng-model variable 
     var name = $scope.fileName; 
     // 
    }; 

}]); 

Weitere Informationen zu ng-model finden AngularJS ng-model Directive API Reference.