Диалог ввода триггерного файла

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

DEMO

<form id="test_form">
    <input type="file" id="test">
    <div id="test1">
        <button>Upload</button>
    </div>
</form>
$("#test1").trigger('click');
$("#test").trigger('click');

Ответы

Ответ 1

Ввод файла не может быть автоматически запущен при onload в целях безопасности. Это не может быть запущено без какого-либо взаимодействия с пользователем. Это очень отвратительно, когда страница сама активирует что-либо, когда страница загружается.

Кстати. Вы можете использовать метку вместо кнопки, как показано ниже:

<label for="test">Upload</label>

Ответ 2

$("document").ready(function() {
    setTimeout(function() {
        $("#test1").trigger('click');
    },10);

    $('#test1').click(function(){
        alert('hii');
    })
});

click event triggerd.

http://jsfiddle.net/j9oL4nyn/1/

Ответ 3

вы можете написать что-то вроде этого

$(document).ready(function(){
    $("input#test").click();
});

это должно работать нормально

Ответ 4

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

если вы измените свою скрипту на

<form id="test_form">
  <input type="file" id="test">
      <div id="test1"><button onclick="alert('click');">Upload</button></div>
</form>

и

$("#test1 button").trigger('click');

то кнопка нажатия будет применена к кнопке. В качестве альтернативы дайте вашей кнопке идентификатор и fo

$("#buttonid").trigger('click');

Ответ 5

Невозможно программно открыть диалог "Открыть файл", используя javascript без действия пользователя; см. Триггер нажмите на input = файл на асинхронном ajax done().

Можно также создать элемент для наложения html в document .ready(), чтобы предоставить пользователю параметры click, чтобы открыть диалог "Открыть файл", вызвав click на input type="file", или закрыть наложение html, нажав "Закрыть".

$(function() {

  function openFileDialog() {
    button.fadeTo(0,1).find(input)[0].click();
    dialog.hide();
  }

  function closeDialog() {
    dialog.hide();
    button.fadeTo(0,1);
  }

  var input = $("input[type=file]")

  , button = $("#button").on("click", function(e) {
    e.stopPropagation();
    this.firstElementChild.click()
  })

  , options = $("<button>", {
    css: {
      position: "relative",
      top: "36vh",
      left: "12vw",
      fontSize: "3.6em"
    }
  })

  , dialog = $("<div>", {
      id: "dialog",
      css: {
        position: "absolute",
        zIndex: 2,
        opacity: 0.25,
        background: "dodgerblue",
        width: window.innerWidth - 30,
        height: window.innerHeight
      }
    })
    .append(
      options
      .clone(false)
      .on("click", openFileDialog)
      .html("Open File")
    , options
      .clone(false)
      .on("click", closeDialog)
      .html("Close")
    )
    .prependTo("body");
  
});
input {
  width: 0;
  opacity: 0;
}

#button {
  position: relative;
  font-size: 32px;
  width: 150px;
  left: 32vw;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form id="test_form">
  <div id="test1">
    <button id="button">Upload
      <input type="file" id="test">
    </button>
  </div>
</form>

Ответ 6

Вы можете сделать это somthing как:

<button id="upld_btn">Upload</button>

$(document).ready(function () {
   $('#upld_btn').trigger('click');
});

Ответ 7

<form id="test_form">
  <input type="file" id="test">
      <div id="test1"><button>Upload</button></div>
</form>

Измените свой JS-код, как показано ниже.

$("#test1 button").click(function() {
$("#test").trigger('click');
});

Рабочая демонстрация

Ответ 8

Показать диалоговое окно ввода файла при загрузке?

Как описано здесь, только Internet Explorer допускает программное открытие диалогового окна "Загрузка файла" . Таким образом, короткий ответ - нет, нет возможности автоматически открыть диалоговое окно "Загрузка файла" при загрузке страницы.

Длинный ответ, который вы можете учесть, заключается в том, что вы можете показать его, когда пользователь нажимает на что-либо. Тот факт, что вы предпочитаете решение AngularJS, говорит нам о том, что вы пишете одностраничное приложение. Кроме того, я не думаю, что вам нужно показать диалог загрузки файлов, когда приложение загружается первым. Скорее всего, вам это нужно, чтобы показать после некоторого взаимодействия с пользователем - после того, как пользователь нажмет что-нибудь. Что-то, используя здесь директиву AngularJS, может выглядеть как ничего, кроме ввода файла. При щелчке (одно и то же взаимодействие с пользователем) вы также можете переключиться на другой маршрут в своем приложении AngularJS, эффективно имитируя пользователя, переходящего на другую страницу, и автоматически представляете ему диалоговое окно "Загрузка файла" .