角文件上傳立即發生電平變化

Question

我有一個粗略的去一點點通過角上傳文件，並在下面的解決方案解決：

$scope.uploadFile = function(files) { 

     var fd = new FormData(); 
     //Take the first selected file 
     fd.append("file", files[0]); 
     console.log($scope.files); 
     $http.post('../resource/editor', fd, { 
      withCredentials: true, 
      headers: {'Content-Type': undefined }, 
      transformRequest: angular.identity 
     }).then(function(data){ 

      //this keeps the user from having to refresh the page 
      DataContext.getEditors().then(function(data){ 
       $scope.myData = data; 
      }); 

     }).catch(function(reason){ 

     }); 
    }; 

<form name="myForm" > 
    <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> 
    <input type="submit" ng-click="uploadFile()" value='Submit'/> 
</form> 

目前的行爲是隻要用戶選擇一個文件，該文件開始上傳。我的意圖是，用戶將上傳文件的按鈕的點擊事件。我錯過了什麼來完成這件事？

Answer 1

當您的文件輸入更改時，看起來您正在調用uploadFile()。這就是爲什麼它立即發生。如果您需要知道選擇什麼樣的文件，添加一個語句來更新一些模型數據onchange：

<input type="file" name="file" onchange="$scope.files = this.files"/> 

然後改變你的uploadFile()方法，以便它使用$scope.files變量：

$scope.uploadFile = function() { 
    ... 
    //Take the first selected file 
    fd.append("file", $scope.files[0]); 
    ... 
}; 

希望這有助於！

Answer 2

你正在調用上傳文件的輸入變化我會給輸入一個模式，並將該值傳遞給按鈕點擊的上傳文件。

<form name="myForm" > 
    <input type="file" name="file" ng-model="fileNames" /> 
    <input type="submit" ng-click="uploadFile(fileName)" value='Submit'/> 
</form>