上传带有角形材料和角形JS的文件 [英] Upload file with angular material and angular JS

问题描述

对于代码，我从中得到了启发:

For the code, i have take inspiration from this :

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

因此，对于HTML，我已经这样做了:

So, for the HTML, i have do this :

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

但是有一个问题，我也不理解为什么:

But there is a problem, and i don't undestand why :

当我选择一个文件时，将调用控制器中的功能.

When I chose a file, the functions in the controller are called.

但是，该值(由ng-model，file1，filetext和filetextdiv设计)是不确定的.

But, the value (designed by ng-model, file1, filetext and filetextdiv) are undefined.

为什么?

推荐答案

使用input type=file

启用ng-model的指令

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

用法

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

---

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

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

---

How to POST a File Using the $http Service

When doing a POST of a file, it is important to set the Content-Type header 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 设置内容类型.

By default the AngularJS framework uses content type application/json. By setting Content-Type: undefined, the AngularJS framework omits the content type header allowing the XHR API to set the content type.

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

For more information, see MDN Web API Reference - XHR Send method

但是，该值(由ng-model，file1，filetext和filetextdiv设计)是不确定的.

为什么未定义file1?核心ng-model指令不适用于type=file

Why is file1 undefined? The core ng-model directive does not work with inputs of type=file

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

Note: Not every feature offered is available for all input types. Specifically, data binding and event handling via ng-model is unsupported for input[file].

— AngularJS输入指令API参考

为什么未定义filetext?输入被禁用.

Why is filetext undefined? The input is disabled.

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

为什么未定义filetextdiv? ng-model指令不适用于<div>元素.

Why is filetextdiv undefined? The ng-model directive does not work with <div> elements.

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

这能回答您的问题吗?

这篇关于上传带有角形材料和角形JS的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！