触发文件输入对话框

Question

如何自动触发文件输入？ IE。在下面的链接中，我想在加载时触发上传按钮

DEMO

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

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

Answer 1

出于安全考虑，onload 中无法自动触发文件输入。没有任何用户交互就无法触发它。页面加载时页面自己激活任何东西，这是非常恶心的。

顺便说一句。 您可以使用 label 代替按钮，如下所示：

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

Answer 2

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

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

点击事件触发。

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

Answer 3

你可以这样写

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

这应该可以正常工作

Answer 4

您的代码的问题是您正在将点击事件应用于输入以及包含按钮的 div，而不是实际按钮。

如果你把你的小提琴改成这个

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

和

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

然后单击触发器将应用于按钮。或者给你的按钮一个 ID 和 fo

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

Answer 5

你可以这样做：

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

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

Answer 6

<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');
});

Working Demo

Answer 7

如果没有用户操作，则无法使用javascript 以编程方式打开“打开文件”对话框；见Trigger click on input=file on asynchronous ajax done()。

或者，可以创建一个元素以覆盖 html 在 document .ready() 事件，以通过在 input type="file" 元素上调用 click 为用户提供 click 以打开“打开文件”对话框的选项，或单击“关闭”关闭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>

Answer 8

Show input file dialog on load?

如此处所述，只有 Internet Explorer 允许以编程方式打开“文件上传”对话框。所以简短的回答是否定的，没有办法在页面加载时自动打开文件上传对话框。

您可能会考虑的长答案是，您可以在用户单击任何内容时显示它。您更喜欢 AngularJS 解决方案的事实告诉我们您正在编写单页应用程序。此外，我认为您不需要在应用首次加载时显示“文件上传”对话框。您很可能需要在一些用户交互之后显示它 - 在用户点击某些东西之后。这个东西，使用这里的 AngularJS 指令，可能看起来像任何东西，但不是文件输入。单击时（相同的用户交互），您还可以切换到 AngularJS 应用程序中的另一个路由，有效地模拟用户导航到另一个页面并自动向他显示文件上传对话框。