angularjs Upload-Datei mit Komponenten

Ich versuche, Datei mit eckigen Komponentenstruktur hochladen, aber ich bin nicht in der Lage, die ausgewählten Dateien zu bekommen.angularjs Upload-Datei mit Komponenten

Schritt 1: Vorlagedaten.

<form name="form"> 
    Hello {{vm.name}} <br /> 
    Upload:  <input my-directive type="file" name="file" ng-model="files" /> <br /> 
    <input type="button" ng-click='vm.uploadFile()' value="Upload File." /> 
</form>

Schritt 2: Js-Datei kombiniert sieht aus wie

'use strict'; 
angular.module('app', ['ngFileUpload']); 


class TestController { 

    constructor(){ 
     this.name = 'user'; 
    } 

    getFiles(selectedFiles){ 
     console.log('Selected files are : ' + JSON.stringify(selectedFiles)); 
     this.files = selectedFiles; // results empty data. 
    } 

    uploadFile(){ 
     console.log('Model data i.e. files consists of : ' + JSON.stringify(this.files)); 
      // Upload code will do later. 
    } 

} 


angular.module('app').directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function (scope, element, attr) { 

      element.bind('change', function() { 
       console.log('Value of element is :' + JSON.stringify(element[0].files[0]));    
      }); 

     } 
    }; 
}); 

//Created a test controller here. 
angular.module('app').controller('TestController', TestController); 

// Created a component here. 
angular.module('app').component('test', { 
    templateUrl: 'test.html', 
    controller: TestController, 
    controllerAs : 'vm', 
});

Vielen Dank im Voraus, auch ich bin neu in Winkel :)

Quelle

2016-05-05 Manish Singh

Können Sie dies in einen Codepen setzen? –

Ok. Ich habe es nicht benutzt, werde es aber versuchen! –

Codepen ist wirklich einfach. Schreib eine Antwort, wenn du es getan hast, damit ich es merke und ich werde es mir ansehen. –

Sorry, ich habe nicht bemerkt, dass Sie benutzten Typoskript. Ich bin noch nicht wirklich auf dem Laufenden. Ich habe auf eine ähnliche Frage geantwortet, die ich neulich mit dem folgenden Code nicht finden kann. Beachten Sie, dass ein Problem mit ng-model und dem Dateieingabetyp besteht. Daher wird document.getElementById verwendet, um die Datei herauszufinden. Ich vermute, dass Sie auf dieses Problem stoßen.

<html> 
<body> 
    <form name="form" ng-app="app" ng-controller="Ctrl as ctrl"> 
    Upload file: 
    <input type="file" id="file" ng-model="ctrl.file" /> 
    <br/> 
    <br/> Enter text: 
    <textarea id="textarea" ng-model="ctrl.text"></textarea> 
    <br/> 
    <br/> 
    <button class="btn btn-primary btn-large" ng-click="ctrl.submitForm()">Submit</button> 
    </form> 
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"> 

</script> 
<script> 
    angular.module('app', []).controller('Ctrl', function() { 

    var vm = this; 
    vm.file = "" 
    vm.text = "" 

    vm.submitForm = function() { 
    // angular doesn't update the model for input type="file" 
    vm.file = document.getElementById('file').value; 
    var retVal = false ; 
    alert(vm.file); 
    alert(vm.text); 
    if (vm.file && ! vm.text) 
     {retVal = true} 
    else if (vm.text && ! vm.file) 
     {retVal = true} 
    else if (!vm.text && !vm.file) 
     {retVal = false} 
    else if (vm.text && vm.file) 
     {retVal = false} 

    if (!retVal) { 
     alert("Please specify either a file or text, not both!") 
    } else 
     alert("ok") 
    } 
}); 

</script> 

</html>

Quelle

2016-05-05 15:52:28

Auch gibt es ein paar gute Lösungen in dieser Antwort: http://stackoverflow.com/questions/32220888/angular-upload-file-directive –

Antwort

Verwandte Themen