角JS INPUT TYPE =文件不會安慰數據

Question

喜林新在角JS，我想嘗試讓我的html我input type = "file"數據。但是，當我安慰它它只是說不確定

HTML

<input type="file" ng-model="data.img" ng-click="upload()"/> 

JS

$scope.upload = function() { 
       console.log($scope.data.img) 

      } 

Answer 1

NG-模型文件類型的輸入不支持。需要使用指令這樣

.directive("filesInput", function() { 
    return { 
    require: "ngModel", 
    link: function postLink(scope,elem,attrs,ngModel) { 
     elem.on("change", function(e) { 
     var files = elem[0].files; 
     ngModel.$setViewValue(files); 
     }) 
    } 
    } 
}) 

調用指令這樣

<input type="file" files-input ng-model="data.img" ng-click="upload()"/> 

現在檢查控制檯

Answer 2

你可以用一個指令做手工的值設置爲ngModel。見例如here

Answer 3

• 你可以用directive去討論下：ng-model for <input type="file"/>

---

• 而是的directive最簡單的就是使用HTML5 API，即FileReader HTML是非常簡單的：

  Add

在你的控制器定義 '添加' 方法：

$scope.add = function(){ 
    var f = document.getElementById('file').files[0], 
     r = new FileReader(); 
    r.onloadend = function(e){ 
    var data = e.target.result; 
    //send your binary data via $http or $resource or do anything else with it 
    } 
    r.readAsBinaryString(f); 
} 

參考here

Answer 4

使用<input type="file" id="file1" name="file1" multiple onchange="angular.element(this).scope().fileNameChanged('file1')"/>，而不是你的代碼，

JS

$scope.fileNameChanged = function(inputField) { 


var file = document.getElementById(inputField).files; 
console.log(file);