Home / Questions / 9539
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-05-11 08:55:13 +0800 CST 2020-05-11 08:55:13 +0800 CST

更改输入类型 =“文件”的样式

  • 772

我想知道是否可以更改<input type="file" />在我们的页面上放置 a 时出现的默认样式。在这里我留下一个截图。

将图像保存到本地存储

上图是我的平板电脑的截图，我保存了图片路径，以便稍后在视图中显示。

我想以默认出现的方式删除输入，并将其放在右上角，并且在我编辑图像时只出现离子清除按钮样式按钮。

代码链接：Codepen

提前感谢您的任何帮助。

angularjs

5 Answers

  1. Best Answer

    您想要的很难实现，您可以在以下链接中看到如何做到这一点的示例

    http://www.quirksmode.org/dom/inputfile.html

    通过隐藏类型文件的输入并使用您可以随意设置样式的普通按钮，我已经轻松实现了相同的目标

    这是您可以使用的指令，您只需将元素更改为button您想要使用的元素。

    angular.module('myApp', [])
  .directive('pickFile', function() {
    return {
      restrict: 'EA',
      template: 
        '<button class="button">Pick</button>' +
        '<input type="file" style="display: none !important">',
      link: function($scope, $element) {
        var input = $element.find('input');
        var button = $element.find('button');

        var evtHandler = function() {
          input[0].click();
        };

        button.on('click', evtHandler)
      }
    };
  });
    .button {
  padding: 10px 20px;
  background-color: red;
  color: white;
  border-radius: 6px;
  font-weight: bolder;
}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <pick-file></pick-file>
</div>

    这是最简单的示例，因为您使用的是 ionic，您可以使用它的样式类或您自己的样式类来设置按钮的样式。

    就像是

    <button class="button button-icon icon ion-plus-round"></button>

    我给你一个完整的例子

    angular.module('myApp', ['ionic'])
  .directive('pickFile', function() {
    return {
      restrict: 'EA',
      template: '<button class="button button-icon icon ion-plus-round pull-right">' +
        '<input type="file" style="display: none !important">' +
        '</button>',
      link: function($scope, $element) {
        var input = $element.find('input');
        var button = $element.find('button');

        var evtHandler = function() {
          input[0].click();
        };

        button.on('click', evtHandler)
      }
    };
  });
    <link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet" />
<script src="http://code.ionicframework.com/1.3.0/js/ionic.bundle.min.js"></script>
<div ng-app="myApp">
  <div class="bar bar-header bar-balanced">
    <pick-file></pick-file>
    <h1 class="title">Perfil estudiante</h1>
  </div>
</div>

    • 5

  2. 最简单的方法是将不透明度为“0”的输入文件放在设计为按钮的 div 或 span 之上，或者您希望它显示。因此，当单击输入文件（不可见但存在并且具有与带有样式的 div 相同的尺寸）时，文件选择选项卡将打开。这就像显示一个没有功能的布局，并且功能（由输入文件提供）对用户来说是“不可见的”。

    注意：您也可以使用可见性隐藏来隐藏输入

    • 1

  3. 伙计，在 Codepen 上创建一个超级简单的示例。只有使用 Css 样式，你才能做你建议的事情，我希望它对你有用。

    链接 Codepen - 示例文件 Css

    • 1

  4. 应 OP 的要求，我修改了 @devconcept 创建的指令，以便可以轻松地将其集成到您已有的代码中。

    一旦你选择了一个文件，它就会调用一个控制器事件，你可以在其中做同样的事情。

    这是CodePen上的完整示例。

    angular.module('myApp', ['ionic'])
  .controller('ctrl', function($scope) {
  
    $scope.recibido = function(file) {
       console.log(file); // aqui tienes el file
    }
    
  })
  .directive('pickFile', function() {
    return {
      restrict: 'EA',
      scope: {
         onselected: "&"
      },
      template: '<button class="button button-icon icon ion-plus-round pull-right">' +
        '<input type="file" style="display: none !important">' +
        '</button>',
      link: function($scope, $element) {
        var input = $element.find('input');
        var button = $element.find('button');

        var evtHandler = function() {
          input[0].click();
        };

        button.on('click', evtHandler)
        input.on('change', function () {
          var file = input[0].files[0];
          $scope.onselected({ file: file });
        });
      }
    };
  });
    <link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet" />
<script src="http://code.ionicframework.com/1.3.0/js/ionic.bundle.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <div class="bar bar-header bar-balanced">
    <pick-file onselected="recibido(file)"></pick-file>
    <h1 class="title">Perfil estudiante</h1>
  </div>
</div>

    • 1

  5. 您已经在这里获得了几种解决方案，但是......将 ngCordova 与 Ionic 一起使用怎么样？有一个文件传输插件，允许您将所有逻辑<input type="file">转换为您在控制器中定义的函数，从而让您完全自由地创建文件上传按钮。

    看看http://ngcordova.com/docs/plugins/fileTransfer/

    • 0