свой метод click()
Здравствуйте
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a> При клике на ссылку fileSelect запускаю функцию а в ней document.getElementById("fileElem").click(); что с свою очередь эмитирует нажатие на input с типом file. Все это для того чтобы скрыть некрасивую форму загрузки файлов. У jquery есть метод click(). Как на чистом js написать этот метод и что мне для этого нужно делал так
document.getElementById("fileElem").onclick;
но не выходит, да и мыслей никаких нет |
я делал это так: внизу по слоям идет красивая кнопочка, а поверх прозрачный итем и файлом.. какбы нажимается кнопочка, но на самом деле идет клик итема
|
skrudjmakdak спасибо, но в моем случае input один а красивых кнопочек будет n-количество(попап окна)
Да и для расширения кругозора хочу научиться писать свой метод клик |
тоже как то хотел сделать как вы, но мне сказали что это вроде не кроссбраузерно.. лично сам не проверял, утверждать не буду
|
вот, даже extjs так делает, как я сказал))
http://docs.sencha.com/extjs/4.1.3/e...le-upload.html |
Может подскажите в какую сторону хоть копать, я не знаю даже с чего ночать.
А на счет кроссбраузерности, если не ошибаюсь реализация на jquery кроссбраузерна |
вот, набросал
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.input_file
{
position: relative;
width: 200px;
height: 30px;
}
.text
{
position: absolute;
top: 0px;
left: 0px;
width: 130px;
height: 24px;
}
.button
{
position: absolute;
top: 0px;
right: 0px;
width: 60px;
height: 30px;
}
.file
{
height: 30px;
width: 200px;
position: absolute;
top: 0px;
left: 0px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
</head>
<body>
<form method="post" action="/login.php">
<div class="input_file">
<input type="text" class="text">
<div class="button">выбрать</div>
<input type="file" class="file">
</div>
</form>
</body>
</html>
|
а как свой click() написать не подскажите? хоть что нибудь от чего можно оттолкнуться
|
Цитата:
|
input[type="file"] {
position: absolute;
visibility: hidden;
z-index: -100;
}
<div> <input type="file" /> <input onclick="fileLoad(this)" type="button" value="Загрузить файл" /> </div>
function fileLoad(a) {
a.parentNode.getElementsByTagName('input')[0].click();
}
|
Ruslan, вышеописанное вами я уже реализовал давно, а вот недавно отказался от jquery и переписал практически все на "чистый" js, только вот метод click() не могу свой написать, в этом и загвоздка
|
вам же сказали, что как вы хотите кроссбраузерно работать не будет. делайте сначала кнопку, а поверх прозрачный итем. что не понятного?
|
Цитата:
|
Цитата:
Вродь onchange работает... И cмысл кликать на него ?
<style>span,input:hover{cursor:pointer}</style>
<span onclick="alert('A')" style="background:url(http://javascript.ru/forum/images/editor/insertimage.gif) no-repeat 140px center;"><input type=file style="opacity:0"></span>
|
Цитата:
$(inputFile).click() |
vadim5june,
Да вродь смысла особого нет, все одно - окно должно открыться - значит событие от пользователя, типично всё это нужно для костомизации инпута |
Цитата:
Цитата:
|
vadim5june,
Да все извраты, чтобы свой инпут оформить, кликнуть по нему, а тот передаст клик настоящему Точно так же, можно упразрачнить текущий, и клик по нему , сделать видимым - якобы клика по своему, а событие клика - отслеживается идентично, |
Цитата:
|
Это не извраты это мозилла советует https://developer.mozilla.org/en-US/...b_applications см. раздел "Using hidden file input elements using the click() method"
Мне уже сказали что это не кроссбраузерно но я все же хочу покопаться в этом, хуже не будет Ребят каждый ваш вариант правильный, но все же мне хочется научиться делать такое хоть даже не кроссбр-но, я не могу просто пройти мимо и забить, так не могу, поэтому прошу пояснить логику этого метода click() от jq и перечислить встроенные методы js которые могут понадобится, мне бы толчок, а то не знаю даже как начать |
Хм, оказыается вариант с click() довольно таки кроссбраузерный.
http://stackoverflow.com/a/8924420 Не работает в Firefox до 4 версии, что слегка расстраивает. Также непонятно работает ли это в мобильных браузерах. |
В чем преимущество варианта реализации от мозилла на примере моего проекта. Есть возможность создавать попап окна, и у каждого окна есть кнопка загрузить, если придерживаться вашего метода придется при каждом вывозе попап каждому окну создавать скрытый инпут и красивенькую кнопку. В моей же реализации input будет один и грузится с основной страницей, а красивенькая кнопка у попап окна вызывает тот самый один инпут а не n-ое его количество
|
zzzzzz,
:) В принципе, отправка FormData автоматически вызывает диалоговое окно загрузки файлов, при наличии input File в отправляемой форме |
я писал про количество input с типом file, не хочу их плодить поэтому реализация мозилла мне подошла
|
zzzzzz,
Если отправлять FormData, у Вас реальных инпутов - может и вообще не быть, а заполняться через скрипт Вашими методами, а включение в FormData input File, вызовет перед отправкой - диалоговое окно, а отправить форму через FormData можно чисто программно, или по вашему клику |
Deff, а можешь пример накидать?
zzzzzz, при желании можно один и тот же инпут накладывать на целую кучу кнопок по событиям mouseover и focus |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
var r= document.createElement('input'); r.type = 'file'; r.click(); |
РЕШЕНО. Кому нужно копайте в сторону dispatchEvent
http://stackoverflow.com/questions/2...-dispatchevent http://habrahabr.ru/qa/17222/ http://stackoverflow.com/questions/2...-dispatchevent http://help.dottoro.com/ljrinokx.php |
И чем это поможет? Напиши в кратце какую проблему решает dispatchEvent и в чем отличе от click()
|
| Часовой пояс GMT +3, время: 07:47. |