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

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

Форум программистов > JavaScript: Общие вопросы > Как подменить input:file своим контролом

Автор: walruz 26.1.2007, 11:58

Здравствуйте!

Нашел в интернете идею, как подменить стандартный контрол input/type=file на простое текстовое поле и кнопку рядом с ним.
Занялся этим, потому что заказчика раздражает "обнуление" стандартоного контрола при перезагрузке страницы.
Слова типа "безопасность" и "стандартное поведение" не помогают.

Приведенный ниже фрагмент кода почти smile

работает.
Но на стороне сервера в реквесте выбранный файл отсутствует.
Если использовать onSubmit, чтобы посмотреть значение browse.value в момент отправки на сервер, то это значение равно пути к выбранному файлу.

Пожалуйста, подскажите, что тут можно поделать??? smile

Код

<html>
<head></head>
<body>
<form name="test_form" method="post" action="test.jsp" onsubmit="alert( browse.value );">
<input type=file name=browse style="display: none;">
<input type=text name=file>
<input type=button onClick="browse.disabled=false;browse.click();file.value=browse.value;browse.disabled=true;" 
      value="Select a File...">        
<br><br>
<!-- must be clicked twice for the form to submit! -->
<input type=submit 
      value="Submit The Form Now!"
      style="font-style:veranda; font-size:12px;">      
</form>
</body>
</html>

Заранее большое спасибо!!!

Автор: smartov 26.1.2007, 12:35

walruz, кнопка "Код" делает ваш код читабельным.

Этого мало:

Цитата(walruz @ 26.1.2007, 10:58

)

Надо:

Код


<form enctype="multipart/form-data" 
name="test_form" method="post" action="test.jsp" 
onsubmit="alert( browse.value );">

Как ты раньше файлы грузил, если multipart/form-data не прописал??

И что тебе даст поле с кнопкой? Загрузить файл можно только используя поле типа file.

Автор: walruz 26.1.2007, 12:56

Спасибо за ответ.

Дело не в enctype="multipart/form-data". Уверяю вас, что это просто не очень удачный пример я выбрал и что в своей программе, которую мне хочется заставить работать, это свойство задано и задано верно.

То что "файл можно загрузить только используя поле типа file", я тоже понимаю.
Как вы видите, это поле в форме присутствует.
Если убрать style="display: none;", то можно будет увидеть все, что происходит с этои полем, как оно заполняется и т.д.

Пожалуйста, посмотрите, вдруг вам удастся разобраться с тем, что происходит.

спасибо!

Автор: smartov 26.1.2007, 16:55

walruz,

Цитата(walruz @ 26.1.2007, 11:56

)

Дело не в enctype="multipart/form-data"

Не совсем понимаю. Имеете в виду что в реальном коде form-data есть? Тогда почему не его привели...?

Цитата(walruz @ 26.1.2007, 11:56

)

Если убрать style="display: none;", то можно будет увидеть все, что происходит с этои полем, как оно заполняется и т.д.

Поле типа файл заполнять яваскриптом нельзя. Это несекьюрно и никакой браузер такого не позволит.

Автор: walruz 26.1.2007, 18:46

1) да, enctype="multipart/form-data" в реальном коде присутствует. Почему его нет в примере, который я привел? Потому что я искал решение в интеренете и нашел этот примерчик - маленький и без всего лишнего. Его автор хотел получать только строку (путь к выбранному файлу), но не сам файл. Вероятно, поэтому он не включил это свойство в свой заголовок. К сожалению, я не обратил на это внимание.

2) в IE6 на странице все выглядит превосходно - поле типа file удается заполнить, перед сабмитом его значение все еще равно пути к выбранному файлу, но почему то на сервер ничего не доходит. Может быть броузер отслеживает, что поле было установленно не вручную пользователем, а с помощью скрипта? И никак его "обмануть" нельзя?

Обратите внимание на onClick="browse.disabled=false;browse.click();file.value=browse.value;browse.disabled=true;" .
Если browse.disabled=false; и browse.disabled=true; убрать, то для сабмита формы потребуется два нажатия на кнопку Submit:
- после первого нажатия поле типа file будет "обнулено"
- только после второго нажатия, форма будет передана на сервер

Есть ли способ это победить???

Спасибо!

Автор: smartov 26.1.2007, 21:17

Цитата(walruz @ 26.1.2007, 17:46

)

И никак его "обмануть" нельзя?

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

Автор: Sardar 27.1.2007, 00:09

Клик на input:file работать будет только в IE.
Глянь http://www.quirksmode.org/dom/inputfile.htmlдля более корректного решения всей задачи, если нужно было просто сделать собственный красивый input:file.

Автор: walruz 29.1.2007, 10:41

Цитата(smartov @ 26.1.2007, 21:17)

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

Если вы говорите о моем примере, то это не правда - мы сможем взять только тот файл, который пользователь сам выбрал.