Форум

zzzzzz · #1 (**permalink**) 08.07.2013, 11:30

Здравствуйте
<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 · #2 (**permalink**) 08.07.2013, 11:53

я делал это так: внизу по слоям идет красивая кнопочка, а поверх прозрачный итем и файлом.. какбы нажимается кнопочка, но на самом деле идет клик итема

zzzzzz · #3 (**permalink**) 08.07.2013, 12:00

skrudjmakdak спасибо, но в моем случае input один а красивых кнопочек будет n-количество(попап окна)

Да и для расширения кругозора хочу научиться писать свой метод клик

skrudjmakdak · #4 (**permalink**) 08.07.2013, 12:06

тоже как то хотел сделать как вы, но мне сказали что это вроде не кроссбраузерно.. лично сам не проверял, утверждать не буду

skrudjmakdak · #5 (**permalink**) 08.07.2013, 12:12

вот, даже extjs так делает, как я сказал))
http://docs.sencha.com/extjs/4.1.3/e...le-upload.html

zzzzzz · #6 (**permalink**) 08.07.2013, 12:16

Может подскажите в какую сторону хоть копать, я не знаю даже с чего ночать.

А на счет кроссбраузерности, если не ошибаюсь реализация на jquery кроссбраузерна

skrudjmakdak · #7 (**permalink**) 08.07.2013, 12:27

вот, набросал

<!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>

zzzzzz · #8 (**permalink**) 08.07.2013, 12:34

а как свой click() написать не подскажите? хоть что нибудь от чего можно оттолкнуться

danik.js · #9 (**permalink**) 08.07.2013, 12:41

Сообщение от zzzzzz

А на счет кроссбраузерности, если не ошибаюсь реализация на jquery кроссбраузерна

Причем тут jQuery? Вызов метода .click() кнопки не приводит к открытию диалогового окна в некоторых браузерах (не помню каких).

ruslan_mart · #10 (**permalink**) 08.07.2013, 15:01

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

Форум

Справочник

Discord чат

Курсы javascript