Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Путь к файлу

Автор: Andy_L20066 21.1.2009, 22:21

Привет, нужен совет... не знаю насколько он относится к Стратсу но все же...
Имеется поле <s:textfield id ="id" name = "name"/> (s- 'это тег стратса, тоеть это все на сервере выполняется) на некой форме, сбоку возле него должна быть кнопка, которая могла бы вибырать файлы из локальной системы (ну тоесть должно появлятся окно типа как в html <input type="file">); при выборе какого-то файла, путь к нему должен сохранятся в s:textfield...

Может кто уже делал что-то подобное...?

Хотелось чтобы было кросбраузерное решение...

Автор: krundetz 22.1.2009, 01:28

Andy_L20066, используй слои, либо смотри в сторону флеша

если надумаешь использовать слои, то тебе нужны два слоя. на нижнем слое рисуешь элемент при нажатие на который появляется окно выбора файла, в верхний слой помешаешь <input type="file"> и делаешь его прозрачным, далее вешаешь обработчик на событие изменение значение, по которому читаешь у поля значение(атрибут value), им будет путь до файла на клиентской машине

Автор: Andy_L20066 22.1.2009, 11:06

Cпасибо за идею...

хм... что-то я не совсем сразу понимаю...

Код


<html>
<script LANGUAGE='JavaScript'>
function getFile()
{
    
}
</script>

<head>
    <title>Test Layers</title>
</head>
<body>
    <form action = "" name="testForm">
    <div id="inputFile" style="display:none">
        <input type='file' name="fileElement" value="" size=50/>
    </div>
    <div>
        <button title="Test" name = "Hello" value = "Hello" onclick="getFile()"/>
    </div>
    </form>    
</body>
</html>

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

Автор: Andy_L20066 22.1.2009, 14:49

ну... вроде как бы можно было би написать

Код


<s:form>
<input type="file">
<s.hidden id = "">
</s:form>

при сабмите формы хідден поле сетается джаваскриптом... и таким образом стратсовое поле сабмитится.. все нормально...

но интересно что делать если надо изменить стандартную кнопку Browse... на какую ту другую по стилю (припустим заокругленую)....?

Автор: Aliance 22.1.2009, 14:49

Примерно так:

Код


<html>
<head>
    <title>Test Layers</title>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript">
var file = '';
function getFile()
{
    $( '#inputFile' ).show().find( 'input' ).bind( 'change', function()
        {
            file = $( this ).val();
        }
    );
}
</script>
</head>
<body>
    <form action = "" name="testForm">
    <div id="inputFile" style="display:none">
        <input type='file' name="fileElement" value="" size=50/>
    </div>
    <div>
        <button title="Test" name = "Hello" value = "Hello" onclick="getFile()"/>
        <br />
        <a href="javascript:alert(file);">File</a>
    </div>
    </form>    
</body>
</html>

Автор: Andy_L20066 22.1.2009, 15:08

хм... ну тут джаваскриптову либу надо подгружать... ну все равно спасибо...

Автор: Andy_L20066 22.1.2009, 15:28

пример с jquery.js - не канает... скачал либу... так там просто при клике на кнопку показывается <div> c <input type="file">.... мне надо чтобы при нажатии кнопки открывался диалог для выбора файла.... Возможно ли это?

короче, на этом форуме когда пишу ответ, вижу что есть возможность приатачить файл, есть кнопка Сhoose... вот мне надо что-то такое... только чтоб кнопку Сhoose... можно было изменить на СВОЮ...

Автор: Aliance 22.1.2009, 16:45

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

Код


<html>
<head>
<title>Test Layers</title>
<script type="text/javascript" src='http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js'></script>
<script type="text/javascript">
$( function()
    {
        $( '#getFile' ).bind( 'click', function()
            {
                $( '#inputFile' ).trigger( 'click' );
            }
        ).bind( 'change', function()
            {
                $( '#fileElement' ).val( $( this ).val() );
            }
        );
    }
);
</script>
</head>
<body>
<form action=''>
<input id='inputFile' style='display: none;' type='file' />
<input id='fileElement' type='text' name='fileElement' />
<input type='button' value='Обзор' id='getFile' />
</form>    
</body>
</html>

Можно и без jQuery обойтись, но не вижу причины отказывать себе в ее использовании.

P.S.: за примерами - в поиск, тут ни раз такие задачи уже решались.

Автор: Andy_L20066 22.1.2009, 17:17

в Mozilla и Opera- пример не работает, при нажимании на кнопку - ничего не показуется...

в Explorer - вроде диалог открывается.... но после выбора файла текстовое поле пустое...

Автор: Andy_L20066 22.1.2009, 21:50

Наконец добрался до форума... без либ можно написать вот так:

Код


<html>
<head>
<title>Test Layers</title>
<script type="text/javascript">
function getFile()
{
    document.getElementById("inputName").click();
}
</script>
</head>
<body>
    <input id = "inputName" type='file' style="display:none" name="fileElement" onchange="document.getElementById('textField').value=this.value" size=50/>
    <input type="text" id="textField"/>
    <button title="Test" name = "Hello" value = "Hello" onClick="getFile()"/>
</body>
</html>

Но вот ни в ФФ ни в Опере не работает... в Експлорере - работает....

Автор: krundetz 22.1.2009, 22:21

Andy_L20066, в опере и мозиле не работает так как по стандарту и не должно так работать

Код


<body>
<div style="width:215px;hieght:20px;border:1px black solid;position:relative;z-index:1;text-align:center;">Кнопка выбора файла</div>
<input type="file" style="opacity:0;position:relative;z-index:2;top:-20px;"/>
</body>

вобшем надеюсь из примера все понятно, смотреть его следует в лисе, чтобы работало в эксплорире и опере надо смотреть как там работает прозрачность, путь к загруженному файлу вытаскивать при помощи javascript

Автор: Andy_L20066 22.1.2009, 22:51

что-то внутри меня подсказывало что без СSS тут не обойтись... спасибо... сейчас попробую...

Добавлено через 7 минут и 7 секунд
ну... твой СSS править прийдется... разлезлось всьо в ФФ...

Добавлено через 8 минут и 28 секунд
но суть понятна....

Автор: krundetz 22.1.2009, 23:29

Цитата(Andy_L20066 @ 22.1.2009, 22:51

)

ну... твой СSS править прийдется... разлезлось всьо в ФФ...

Цитата(Andy_L20066 @ 22.1.2009, 22:51

)

но суть понятна....

так делалось чтобы суть передать

Автор: Andy_L20066 22.1.2009, 23:35

cпасибо...

Автор: Aliance 23.1.2009, 10:39

Если вопрос решен, то в правом верхнем углу есть кнопка "Пометить как решённый"