触发文件输入对话框

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

DEMO

  
 Upload 
  

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

Answer 1

出于安全目的，无法在onload自动单击文件输入。 没有任何用户交互就无法触发它。 当页面加载时页面激活任何内容时非常恶心。

顺便说说。 您可以使用按钮的标签 instaed，如下所示：

 Upload 

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

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

如果你改变你的小提琴

 
  
Upload
  

和

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

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

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

Answer 5

你可以这样做：

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

Answer 6

 
  
Upload
  

像下面一样更改你的JS代码。

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

工作演示

Answer 7

在没有用户操作的情况下，无法使用javascript以编程方式打开“打开文件”对话框; 请参阅触发器在异步ajax done（）上单击input = file 。

或者，可以创建一个元素来覆盖document .ready()事件中的html ，为用户提供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 = $("", { css: { position: "relative", top: "36vh", left: "12vw", fontSize: "3.6em" } }) , dialog = $("
", { 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; } 

  
 
 Upload   
  

Answer 8

加载时显示输入文件对话框？

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

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