Менять стиль неудара в лунку type = “file”
Я хочу знать, возможно ли менять ему назначенный по умолчанию стиль, который появляется, разместив один на нашей странице. Здесь я оставляю задержание экрана.
Предыдущее изображение - задержание экрана моего tablet, где я сохраняю маршрут изображения, чтобы потом показывать ее в виде.
Я хотел бы снять неудар в лунку назначенного по умолчанию способа, который появляется, и разместить это в верхнем прямом углу, и что только появилась кнопка стиль clear button ionic, такой который издал изображение.
Соединение кода: Codepen
Спасибо заранее из-за любой помощи.
То, что ты хочешь, достаточно трудное для того, чтобы ему удается и ты можешь видеть пример как делать в 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>Самая простая форма - размещая неудар в лунку file с opacity "0" над div или span разработанный как кнопка, или как ты хотел, чтобы он появился. Для того, чтобы я схватил, щелкнув на неударе в лунку file, (что не видится, но есть и у него есть те же размеры, что и div со стилями), открыло себе закладку выбора файлов. Это что-то подобное показывать рисунок, у которого нет функциональности, и функциональность (которая дает неудар в лунку file) будет являться "невидимой" в пользователя.
Заметь: Также ты мог бы использовать visibility hidden, чтобы скрывать в неудар в лунку
-
1
-
2Хороший и # 237; simo. Я надеюсь, что ты добиваешься ожидаемых результатов. – Criss 11.05.2016, 02:27
Друг, думает супер простой пример в Codepen. Только со стилями Css обрежь делать то, что ты предлагаешь себе, я надеюсь, что он подает тебя.
-
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
Уже они дали тебе несколько решений из-за aquГ, - но... Вїy использовать ngCordova с Ionic? Есть plugin для перенесения файлов, которое позволяет тебе перемещать весь она lГіgica из <input type="file"> к одной funciГіn, который ты сами определяешь внутри твоего драйвера, а следовательно он дает тебе полную свободу, чтобы создавать один botГіn подъема файлов.
Г‰chale глаз http://ngcordova.com/docs/plugins/fileTransfer/
-
1Ok, я это проверил немного, но я вижу только алтарь использую с Интернетом, такой же формы я брошу руку. – 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
Error: [$injector:unpr] Unknown provider: $elementProvider <- $element <- perfilEstudiante– Pedro Miguel Pimienta Morales 11.05.2016, 05:59