Менять стиль неудара в лунку type = “file”

Я хочу знать, возможно ли менять ему назначенный по умолчанию стиль, который появляется, разместив один на нашей странице. Здесь я оставляю задержание экрана.

Guardar imagen en localstorage

Предыдущее изображение - задержание экрана моего tablet, где я сохраняю маршрут изображения, чтобы потом показывать ее в виде.

Я хотел бы снять неудар в лунку назначенного по умолчанию способа, который появляется, и разместить это в верхнем прямом углу, и что только появилась кнопка стиль clear button ionic, такой который издал изображение.

Соединение кода: Codepen

Спасибо заранее из-за любой помощи.

7
задан 10.05.2016, 20:46
5 ответов

То, что ты хочешь, достаточно трудное для того, чтобы ему удается и ты можешь видеть пример как делать в siquiente соединение

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

Я добился того же самого без многой трудности скрывая неудар в лунку типа file и используя общую и текущую кнопку, что ты можешь estilar, как ты понравился

Здесь я оставляю тебе директивный орган, который ты можешь использовать в той, которая ты только должен менять элемент 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
ответ дан 24.11.2019, 14:27
  • 1
    Превосходный твой ответ, я попытаюсь только копируя то, в чем я нуждаюсь, чтобы функционировать прикрепляя кнопку и неудар в лунку внутри header – Pedro Miguel Pimienta Morales 11.05.2016, 01:42
  • 2
    у меня выходит эта ошибка l стараться делать это нормальной формой Error: [$injector:unpr] Unknown provider: $elementProvider <- $element <- perfilEstudiante – Pedro Miguel Pimienta Morales 11.05.2016, 05:59
  • 3
    @PedroMiguelPimientaMorales, Может быть, ты скопировал плохо c и # 243; я говорю или est и # 225; s, стараясь помещать это в controller., обрати внимание, что то, что я поместил тебе, было директивным органом а следовательно $element не вводимый а одна из пары и # 225; метры funci и # 243; n соединение. – devconcept 11.05.2016, 15:10
  • 4
    Если я это сделал, он они ворует, что он не работал с директивными органами – Pedro Miguel Pimienta Morales 11.05.2016, 16:42
  • 5
    @PedroMiguelPimientaMorales Помни, что в угловом переиспользуемые компоненты всегда руководящие а следовательно я рекомендую тебе изменять c и # 243; я говорю, что я поместил тебя, чтобы это приспосабливать к твоей необходимости вместо того, чтобы это использовать в controller. – devconcept 11.05.2016, 16:47

Самая простая форма - размещая неудар в лунку file с opacity "0" над div или span разработанный как кнопка, или как ты хотел, чтобы он появился. Для того, чтобы я схватил, щелкнув на неударе в лунку file, (что не видится, но есть и у него есть те же размеры, что и div со стилями), открыло себе закладку выбора файлов. Это что-то подобное показывать рисунок, у которого нет функциональности, и функциональность (которая дает неудар в лунку file) будет являться "невидимой" в пользователя.

Заметь: Также ты мог бы использовать visibility hidden, чтобы скрывать в неудар в лунку

1
ответ дан 24.11.2019, 14:27
  • 1
    Я попытаюсь, и скажу тебе, как он я пошел – Pedro Miguel Pimienta Morales 11.05.2016, 01:16
  • 2
    Хороший и # 237; simo. Я надеюсь, что ты добиваешься ожидаемых результатов. – Criss 11.05.2016, 02:27

Друг, думает супер простой пример в Codepen. Только со стилями Css обрежь делать то, что ты предлагаешь себе, я надеюсь, что он подает тебя.

Соединение Codepen - Пример Филе Ксс

1
ответ дан 24.11.2019, 14:27
  • 1
    Очень хороший, я увижу, как я применяюсь к моему проекту – Pedro Miguel Pimienta Morales 11.05.2016, 01:35

В заказ OP, я изменил директивный орган, созданный из-за @devconcept, для того, чтобы смогло объединяться в cГіdigo, что уже у него есть простой формы.

Как только ты выбираешь файл звонит в событие драйвера, где ты делаешь то же самое, что и ты делал.

AquГ - у тебя есть полный пример в 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
ответ дан 24.11.2019, 14:27
  • 1
    уже функционирует спасибо учитель – Pedro Miguel Pimienta Morales 11.05.2016, 18:59

Уже они дали тебе несколько решений из-за aquГ, - но... Вїy использовать ngCordova с Ionic? Есть plugin для перенесения файлов, которое позволяет тебе перемещать весь она lГіgica из <input type="file"> к одной funciГіn, который ты сами определяешь внутри твоего драйвера, а следовательно он дает тебе полную свободу, чтобы создавать один botГіn подъема файлов.

Г‰chale глаз http://ngcordova.com/docs/plugins/fileTransfer/

0
ответ дан 24.11.2019, 14:27
  • 1
    Ok, я это проверил немного, но я вижу только алтарь использую с Интернетом, такой же формы я брошу руку. – Pedro Miguel Pimienta Morales 11.05.2016, 16:32
  • 2
    Нет, plugin в и # 241; ade в cordova.js, когда ты составляешь твой aplicaci и # 243; n, так что оно функционирует tambi и # 233; n офлайн. – Juanjo Salvador 11.05.2016, 17:23