上传带有 Angular 材质和 Angular JS 的文件

对于代码，我从中得到了灵感：

https://codepen.io/alexandergaziev/pen/JdVQQm

所以，对于 HTML，我这样做了：

 <div class="file_input_div">
    <div class="file_input">
      <label class="image_input_button mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
        <i class="material-icons">file_upload</i>
        <input id="file_input_file" class="none" type="file"
               ng-model="file1"
               onchange="angular.element(this).scope().changeInputText(this);
                         angular.element(this).scope().changeState();"/>
      </label>
    </div>
    <div id="file_input_text_div" class="mdl-textfield mdl-js-textfield textfield-demo"
          ng-model="filetextdiv">
      <input class="file_input_text mdl-textfield__input"
             type="text" disabled readonly id="file_input_text"
             ng-model="filetext" />
      <label class="mdl-textfield__label" for="file_input_text">
      </label>
    </div>
  </div>

并在相应的控制器中：

 $scope.changeInputText = function(){
    console.log($scope.file1);
    console.log($scope.filetext);
    console.log($scope.filetextdiv);
    var str = $scope.file1.value;
    var i;

    if (str.lastIndexOf('\\')) 
    {
      i = str.lastIndexOf('\\') + 1;
    } 
    else if (str.lastIndexOf('/')) 
    {
      i = str.lastIndexOf('/') + 1;
    }

    $scope.filetext.value = str.slice(i, str.length);

  };

  $scope.changeState = function() {

    console.log("Coucou");
    if ($scope.filetext.value.length != 0) 
    {
      if (!$scope.filetextdiv.classList.contains("is-focused")) 
      {
        $scope.filetextdiv.classList.add('is-focused');
      }
    } 
    else 
    {
      if ($scope.filetextdiv.classList.contains("is-focused")) 
      {
        $scope.filetextdiv.classList.remove('is-focused');
      }
    }
  }

但有一个问题，我不明白为什么：

当我选择一个文件时，控制器中的函数就会被调用。

但是，该值（由 ng-model、file1、filetext 和 filetextdiv 设计）未定义。

Why ?

启用指令ng-model with input type=file

app.directive('fileModel', function () {
    return {
        restrict: 'A',
        require: "ngModel",
        link: function(scope, elem, attrs, ngModel) {
            elem.on('change', function(e){
                ngModel.$setViewValue(elem[0].files);
            });
        }
    };
});

Usage

<input type="file" ng-model="vm.files" file-model />

如何使用 $http 服务发布文件

对文件进行 POST 时，设置内容类型标头 to undefined.

var config = { headers: {
               "Content-Type": undefined,
              }
           };

$http.post(url, vm.files[0], config)
  .then(function(response) {
    vm.result = "SUCCESS";
}).catch(function(response) {
    vm.result = "ERROR "+response.status;
});

默认情况下，AngularJS 框架使用内容类型application/json。通过设置Content-Type: undefined，AngularJS 框架省略了内容类型标头，允许XHR API设置内容类型。

有关更多信息，请参阅MDN Web API 参考 - XHR 发送方法

但是，该值（由 ng-model、file1、filetext 和 filetextdiv 设计）未定义。

Why ?

Why is file1不明确的？核心ng-model指令不适用于以下输入type=file

Note:并非所提供的所有功能都适用于所有输入类型。具体来说，数据绑定和事件处理通过ng-model不支持input[file].

— AngularJS 输入指令 API 参考

Why is filetext不明确的？输入被禁用。

 <input class="file_input_text mdl-textfield__input"
        type="text" disabled readonly id="file_input_text"
        ng-model="filetext" />

Why is filetextdiv不明确的？这ng-model指令不适用于<div>元素。

<div id="file_input_text_div" class="mdl-textfield mdl-js-textfield textfield-demo"
     ng-model="filetextdiv">

这是否回答你的问题？