| Dim@ | 19.07.2012 10:45 |
vadim5june,
да ну, правда что ле ?
да ну, правда что ле ?
Закачка файлов JS
Точнее даже не закачка. Есть поле
<input style="display:none;" type="file" id="id1">и есть некая ссылка. <a href="#" onclick="addfoto(); return false;">Так вот, как сделать чтобы при нажатии на ссылку появлялось окно выбора файла ( как при нажатии кнопки обзор около инпута) и соответственно выбранный файл добавлялся в поле инпут. Буду очень благодарен за подсказку. |
надо чтобы твой input type="file" был невидимым и под мышкой, когда ты щелкаешь. Т.е. чтобы фактически ты щелкал по невидимому input type="file"
|
Цитата:
Deller если что-то придумаешь отпиши плиз - интересно. А то я тоже не знаю как такое сделать и можно ли вообще. |
все решил. Надо быть проще, мы сами себе жизнь усложняем. Делаем вот так style="opacity:0;" для инпута (невидимость не надо). А ссылку над кнопкой "обзор" инпута.:)
|
Цитата:
|
Цитата:
|
Deller, везде работает? В ИЕ6?
|
Цитата:
|
Ваше решение - бред. opacity работает только в CSS3, следовательно этот вариант не кроссбраузерный. Это делается по-другому.
Создается элемент <input type='file' id='file'> и <div></div>. у инпута ставится css свойство display:none. Затем $("div").click(function(){ $("#file").trigger('click'); }); После этого выбранный файл лежит в форме, которую не видно. вы можете создать кнопку <input type='submit'> или просто отслеживать событие изменения элемента с id='file'. После этого ajax'ом отправлять данные на сервер, для этого есть jquery плагин ajaxForm плагин |
Цитата:
|
Цитата:
А вот Ваше решение — действительно бред. Нельзя программно кликнуть на input[type=file].
<input type="file" id="file" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
var file = $('#file');
alert("Let's click of #file…");
file.trigger('click');
alert('Clicked! Value: ' + file.attr('value'))
</script>
|
Rinas,
некропостить обязательно? Ты на год последнего поста смотрел? И все браузеры давно поддерживают opacity, и даже для ишака есть решение, если ты не в курсе, то делается оно очень просто: style="opacity: 0; filter: Alpha(opacity=0);" |
В хроме такое прокатывает
<a href="#">
<label style="cursor: pointer">
<input type="file" style="display: none">
link
</label>
</a>
|
в опере такое прокатывает:
<label style="cursor: pointer">
<input type="file" style="width:0;height:0;visibility:hidden;position:absolute;">
link
</label>
|
так везде катит, кроме FF
<label style="cursor: pointer">
<input type="file" style="position: absolute; left: -200px; top: -200px;">
link
</label>
|
Цитата:
|
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function() {
$('#uploadbtn').click(function(e) {
$('#upload').click();
});
});
</script>
<p><input id="uploadbtn" type="button" value="Select Files"/></p>
<input id="upload" type="file" name="loadfile" style="visibility: hidden; opacity: 0; position: absolute;">
|
tadjik1,
Туть не кликают программно - а речь о размещении прозрачного input выше видимой, красиво оформленной кнопки, т.е в итоге кликают все по тому же <input type="file" |
Deff,
да я уже начал проверять во всём, что установлено просто)) на самом деле мне не нужно поддерживать оперу, довольно редко ИЕ, в основном только последние хром и фф. это кусок, который у меня используется. полый хтмл: <div class="dropareainner"> <p class="dropfiletext">Drop files here</p> <p>or</p> <p><input id="uploadbtn" type="button" value="Select Files"/></p> <p>Max size: <%= data.size_limit %>kb</p> <!-- extra feature --> <p id="err"><!-- error message --></p> </div> <input id="upload" type="file" name="loadfile"> </div> |
Ну а что, в FF click() катит.
Так работает везде
<label style="cursor: pointer">
<input type="file" style="position: absolute; left: -200px; top: -200px;">
<span onclick="if (navigator.userAgent.indexOf('Firefox') != -1) {this.parentNode.children[0].click();}">
link</span>
</label>
|
label тоже не нужен
<input type="file" style="position: absolute; left: -200px; top: -200px;"> <span onclick="this.previousSibling.previousSibling.click()">link</span> Цитата:
|
bes,
Красиво - но в Опере не проходит ( нун как то привязать наведение мышью |
Цитата:
|
bes,
Зы - уже лучше - в 11.52 - не работает |
Цитата:
PS: c оперой почти не работаю, поэтому пока не найду, как запустить её в режиме совместимости (хотя по идее без doctype она и так должна работать в этом режиме) |
bes,
Проще установить cтарую версию в какую нидь папку на D или е , указав, при установке, что для одного пользователя |
Цитата:
|
Цитата:
|
devote,
Походу с 11.6 тады норма.. (Именно оттель трабл с картинками начался |
Цитата:
|
Цитата:
|
Цитата:
<input id="fl" type="file" style="">
<script>
document.getElementById('fl').click();
</script>
Можно лишь тогда когда пользователь сделает какое-то действие, клик иль еще чего... то-есть так как это всегда было сделано во флешь.
<input id="fl" type="file" style="">
<script>
document.onkeydown = function() {
document.getElementById('fl').click();
}
</script>
|
Интересно - а клик с координатами input file - не проходит?
|
Цитата:
|
Цитата:
Насколько я знаю, такое пока не провернуть (и скорее всего такого и не будет в целях безопасности), хотя |
Цитата:
Как можно использовать координаты синтетического события. |
Цитата:
Однако, стоит помнить следующее: «Ручной» запуск (генерация) события не создает по умолчанию действие, связанное с этим событием. Например, программная генерирация события focus на элементе не означает, он получит фокус, вручную сгенерированное событие submit не заставит форму отправить данные (следует использовать метод submit формы), сгенерированное событие нажатия клавиши не означает, что символ появится в поле ввода, программное нажание на ссылку не активирует переход по ней, и т. д. Такие ограничения необходимы в целях безопасности и предотвращения сценариев имитации работы пользователя и взаимодействия с браузером http://habrahabr.ru/post/114244/ |
vadim5june,
да ну, правда что ле ? |
Цитата:
|
| Часовой пояс GMT +3, время: 17:05. |