Как эмулировать загрузку изображений input[type=file], через button?

Question

[Frel]

Как эмулировать загрузку изображений input[type=file], через button?
Как-то так
p.s. Уже задавал вопрос, но все таки может найдется ответ!

Answer 1

[Stalker_RED]

Нельзя эмулировать. Потому что у браузеров есть политика безопасности, которая позволяет забирать с компьютера только те файлы, которые юзер выбрал.

Можно СКРЫТЬ input[type=file], сделать его прозрачным, например, а под ним разместить кнопку.

Вот пример: https://jsfiddle.net/2wwgz9h9/
Сейчас стоит opacity: 0.7; а если поставить 0 он будет полностью прозрачным.

Answer 2

[Дмитрий Тимофеев]

Прежде чем спрашивать надо четко сформулировать вопрос, и перед этим понять - может ли вы сформулировать вопрос.
Так или иначе ответ лежит в плоскости применения протоколов и технологий, на которых работает Интернет.
Эмулировать можно многое, но в Интернете это называется по-разному, например, дорвеями или клоакингом.
Из вашего вопроса я вижу что хотите сделать автоматическую загрузку выбранного на клиенте файла - так это уже лет как 10 сделано в многих компонентах.
Лет 10 назад обычно на такие вопросы отвечали RTFM.

Comments

[Frel]

И как это сделать?

[Виталий]

Frel: rtfm))))

Answer 3

[Олег]

Это имели ввиду? https://jsfiddle.net/Politonius/1fg3g76c/1/

Comments

[Frel]

Место input должен быть тег button

Answer 4

[Иван Сушков]

В документации

UPDATE

<input type="file" id="file_uploading" style="display: none;"/>
<button onclick="onClickButton()">
Ваша кнопка
</button>

<script>
function onClickButton(){
 document.getElementById('file_uploading').click();
}
</script>

UPDATE 2
Полная версия:

<img src="" height="200" alt="Image preview...">
<input type="file" id="file_uploading" style="display: none;" onchange="previewFile()"/>
<button onclick="onClickButton()">
Ваша кнопка
</button>

<script>
function onClickButton(){
 document.getElementById('file_uploading').click();
}

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}
</script>

Comments

[Frel]

А как сделать через кнопку?

[Иван Сушков]

Frel: если в лоб, то сделать input[type=file](display:none) и привязать на нажатие кнопки событие(при клике на кнопку инициируется клик по input)

[Frel]

Иван Сушков: Можно кодом показать, не понятно((

[Иван Сушков]

Frel: добавил к основному ответу