Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывод значения value="" в <input type="file"> (https://javascript.ru/forum/misc/13558-vyvod-znacheniya-value%3D-v-input-type%3D-file.html)

BK201 03.12.2010 18:20

Вывод значения value="" в <input type="file">
 
Как сделать на JS вывод названия файла в определенный <div id=""></div> который был указан в <input type="file"> и можно ли сделать что бы значение кнопочки менялось, т.е. например там написано "загрузить" и что бы стало "загружено" или имя файла... :help: что то типа такого)

monolithed 03.12.2010 20:29

Цитата:

Сообщение от BK201
Как сделать на JS вывод названия файла в определенный <div id=""></div> который был указан в <input type="file">

<script type="text/javascript">
window.onload = function(){
    document.getElementsByTagName('input')[0].onchange = function(){
        document.getElementsByTagName('div')[0].innerHTML = this.value;
    };
};
</script>

<input type="file" />
<div></div>


Цитата:

Сообщение от BK201
и можно ли сделать что бы значение кнопочки менялось

По-умолчанию такие возможности стилизации элемента не представляются. Но можно попробовать.....

Цитата:

Сообщение от BK201
т.е. например там написано "загрузить" и что бы стало "загружено" или имя файла

Для этого нужно задействовать Ajax

ksa 04.12.2010 09:51

Цитата:

Сообщение от BK201
можно ли сделать что бы значение кнопочки менялось, т.е. например там написано "загрузить" и что бы стало "загружено" или имя файла...

Вот почитай про наши эксперименты...

BK201 06.12.2010 11:44

Цитата:

Сообщение от monolithed (Сообщение 82179)
<script type="text/javascript">
window.onload = function(){
    document.getElementsByTagName('input')[0].onchange = function(){
        document.getElementsByTagName('div')[0].innerHTML = this.value;
    };
};
</script>

<input type="file" />
<div></div>



По-умолчанию такие возможности стилизации элемента не представляются. Но можно попробовать.....


Для этого нужно задействовать Ajax

Спасибо!!))) работает...но есть одно но...
Допустим на странице много <div></div>, а надо передать значение только определённому.

Я писал так:
<script type="text/javascript">
window.onload = function(){
    document.getElementById('form1')[0].onchange = function(){
       	document.getElementById('name')[0].innerHTML = this.value;
		
    };
};
</script>

<input id="form1" type="file" />
<div id="name"></div>

Но не работает... где допускаю ошибку?

может есть какой то вариант сделать на jQuery

monolithed 06.12.2010 11:55

у document.getElementById() нет length, а вот в гребаном jQuery есть

<script type="text/javascript">
window.onload = function(){
    document.getElementById('form1').onchange = function(){
       	document.getElementById('name').innerHTML = this.value;
		
    };
};
</script>

<input id="form1" type="file" />
<div id="name"></div>



на jQuery будет так:

$(function(){
     $('#form1').change(function(){
         $('#name').text($(this).val());
     });
});

BK201 06.12.2010 14:38

Работает токо в опере и IE8 :(
я делаю кнопки немного стилизированые
использую css:
#download {
        overflow:hidden;
        width:95px;
        height:20px;
        cursor:pointer;
		background:url("/img/download.png") no-repeat scroll 0 40% transparent;
     }
#download:hover {
        overflow:hidden;
        width:95px;
        height:20px;
        cursor:pointer;
        background:url("img/download_r.png") no-repeat scroll 0 40% transparent;
     }
.input_download {
        opacity:0;
         filter:alpha(opacity:0);
         font-size:199px;
         cursor:pointer;
         padding:0px;
         margin:0px;
         border:none;
         margin-left:-450px;
     }

без добавления этого скрипта все работает... с ним не во всех браузерах...

хотел использовать стилизацию как описано в статье, но тот код отключает стилизацию радио батон на jQuery.

Еще появился вопрос возможно ли передать клас в определенный div, т.е. при загруженном файле вместо пути просто подсвечивалась кнопка другим цветом.

monolithed 06.12.2010 16:02

Цитата:

Сообщение от BK201
ез добавления этого скрипта все работает... с ним не во всех браузерах...

Я это писал в Firefox, ищите проблему в своем коде

BK201 06.12.2010 16:08

решение уже нашел... нужно было немного подправить CSS.

спасибо))

вот теперь думаю как бы сделать активацию кнопки если там уже загружен файл...

$(function(){
         $('#input_download1').click(function(){
			 
          if($('#input_download1').value == "") 
					{
					$('#download1').addClass("download") 
					}
					else 
					{
					$('#download1').addClass("download_activ");
					}
         });

написал такое...

как я понял, алгоритм должен быть: кликаем на кнопку->выбираем файл->добавляем его в форму->и потом идет проверка: если файл есть (value>0 )тодобавить клас такое если нету файла, то оставить как есть...

а как это правильно написать....

monolithed 06.12.2010 18:14

Цитата:

Сообщение от BK201
как я понял, алгоритм должен быть: кликаем на кнопку->выбираем файл->добавляем его в форму->и потом идет проверка: если файл есть (value>0 )тодобавить клас такое если нету файла, то оставить как есть...

Чтобы проверить, что файл загружен - необходимо получить соответствующий ответ от сервера, для используйте Ajax

BK201 06.12.2010 18:30

решение нашли))
Просто проверяются все input:file и где появляется файл присваивается другой класс


Часовой пояс GMT +3, время: 02:15.