如何将按钮设置为文件输入类型

Question

我有一个按钮，当点击它时应该作为文件上传操作。

<div id="Rectangle-541">
    <md-icon md-svg-src="./assets/images/csv.svg" class="ic_cloud_download_black_24px"></md-icon>
  <md-button class="Upload-CSV-from-mem">Upload .CSV From Memory</md-button>

</div>

- Azhar Khan

Answer 1

看看这个

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  
  $scope.fileChanged = function(){
        angular.element('#fileUplaod').trigger('click');
  };
  
  $scope.profilePictureSelected = function(data){
    console.log(data.files[0]);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mainApp" ng-controller="mainCtrl">
  <div id="Rectangle-541">
      <md-icon md-svg-src="./assets/images/csv.svg" class="ic_cloud_download_black_24px"></md-icon>
      <md-button class="Upload-CSV-from-mem" ng-click="fileChanged()">Upload .CSV From Memory</md-button>
</div>

<input type="file" style="display:none" id="fileUplaod" ng-model="myFile" name='file' onchange="angular.element(this).scope().profilePictureSelected(this)" />
</div>

- byteC0de

---

我尝试了这个，但是出现了错误。通过选择器查找元素不受jqLite支持！请参阅：http://docs.angularjs.org/api/angular.element http://errors.angularjs.org/1.5.5/jqLite/nosel - Azhar Khan

@TechnoGeek，你需要使用jQuery来完成这个。 - byteC0de

是的，我做到了，运行得很好。谢谢兄弟。 - Azhar Khan