angularjsコンポーネントを使用してファイルをアップロード

角度コンポーネント構造を使用してファイルをアップロードしようとしましたが、選択したファイルを取得できません。angularjsコンポーネントを使用してファイルをアップロード

ステップ1：テンプレートデータ。

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

ステップ2：事前に

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

おかげのようなJSファイルを組み合わせルックスは、よく私は角に新しいです:)

が

出典

2016-05-05 Manish Singh

これをCodepenに挿入できますか？ –

私はそれを使用haventしかし試みます！ –

Codepenは本当に簡単です。あなたがそれをしたときに返信をポストするので、私は通知を得ると私は見てみましょう。 –

申し訳ありませんが、私はあなたのことがわかりませんでしたtypescriptを使用していました。私は実際にはまだ全然スピードアップしていません。私は幾分似たような質問に答えることができましたが、先日私は以下のコードで見つけることができません。 ng-modelとファイル入力タイプに問題があるので、document.getElementByIdを使用してファイルを見つけます。私はこの問題があなたが走っているものだと思っています。

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

出典

2016-05-05 15:52:28

また、この回答にはいくつかの良い解決策があります：http://stackoverflow.com/questions/32220888/angular-upload-file-directive –

angularjsコンポーネントを使用してファイルをアップロード

答えて

関連する問題