Вывод значения value="" в <input type="file">

[BK201]

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

[monolithed]

Как сделать на 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>

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

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

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

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

[ksa]

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

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

[BK201]

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

Спасибо!!))) работает...но есть одно но...
Допустим на странице много <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]

у 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]

Работает токо в опере и 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]

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

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

[BK201]

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

спасибо))

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

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

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

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

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

[monolithed]

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

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

[BK201]

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