jQuery触发文件输入答案

【问题标题】：jQuery trigger file inputjQuery触发文件输入
【发布时间】：2010-10-22 00:52:59
【问题描述】：

我正在尝试使用 jQuery 触发上传框（浏览按钮）。
我现在尝试的方法是：

$('#fileinput').trigger('click');

但它似乎不起作用。请帮忙。谢谢。

【问题讨论】：

确实很郁闷，而且是“点击”触发的，真的吗？我更喜欢 Flash/AS3，它具有严格的 API 和强大的安全模型，只允许从用户启动的输入事件处理程序调用 FileReference.browse。此外，HTML 文件的输入很丑陋且无法设置样式（它只是一个输入标签，对于内容和样式的分离来说非常重要），因此您必须创建一个新的“浏览”按钮，该按钮也由点击事件激活...您必须通过单击将其转发到文件输入...这可能导致无限递归，具体取决于元素放置和事件委托的特异性。
不幸的是，考虑到 Flash 持续存在的安全问题以及内容拦截器的兴起，使用 Flash 变得越来越不可行。

标签： javascript jquery css

【解决方案1】：

这是由于安全限制。

我发现只有当<input type="file"/>设置为display:none;或者是visbilty:hidden时才会有安全限制。

所以我尝试通过设置position:absolute 和top:-100px; 将其定位在视口之外，然后瞧，它可以工作了。

见http://jsfiddle.net/DSARd/1/

称之为 hack。

希望对你有用。

【讨论】：

在 ff 3.6 中不起作用。虽然适用于 chrome 甚至 ie 8 :)
msdn 上有没有关于安全限制的文档？
效果很好。无论如何，我认为设置left: -100px; 更安全。你永远不知道一个页面能有多长
+1 这是真正的答案（也是一个很好的解决方案）。有没有人有明确说明的文档链接？
你也可以只设置不透明度为0

【解决方案2】：

这对我有用：

JS：

$('#fileinput').trigger('click');

HTML：

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

CSS：

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

>>>另一个可以跨浏览器工作的：

想法是在自定义按钮上覆盖一个不可见的巨大“浏览”按钮。因此，当用户单击您的自定义按钮时，他实际上是在单击本机输入字段的“浏览”按钮。

JS 小提琴：http://jsfiddle.net/5Rh7b/

HTML：

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

CSS：

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

JavaScript：

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});

【讨论】：

有一个缺陷，如果你让按钮变宽，那么在 IE9/10 中，不可见的上传按钮由右侧按钮和左侧文本字段组成。对此，您必须双击。在这种情况下，尝试将字体大小设置为大于 100 像素；
即使在 Chrome 53 中也可以使用。但是，建议将 height 更改为 height: 100%
第二个甚至可以在 iOS 上的 Safari 中使用。非常好！

【解决方案3】：

您可以使用 LABEL 元素例如。

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>

这将触发输入文件

【讨论】：

我刚刚进行了编辑，没有注意到我没有登录，现在我无法编辑它。简而言之，出于可访问性的原因，标签标签应包含 tabindex="1"（无论它应该是什么标签顺序索引）和 role="button" 属性）
对于我使用的输入：opacity: 0; height: 0; width: 0; margin: 0; display: inline;
不幸的是，这在 iOS 上的 Safari 中不起作用:(

【解决方案4】：

我已经在 IE8+、最近的 FF 和 chrome 中工作（=测试）：

$('#uploadInput').focus().trigger('click');

关键是在在触发点击之前聚焦（否则 chrome 会忽略它）。

注意：您确实需要显示和显示您的输入（例如，不是display:none 和visibility:hidden）。我建议（就像许多其他人以前一样）绝对定位输入并将其从屏幕上扔掉。

#uploadInput {
    position: absolute;
    left: -9999px;
}

【讨论】：

+1。我还注意到您可以隐藏周围元素但不能隐藏文件输入按钮，然后显示周围元素，聚焦按钮，激活它，然后隐藏按钮。

【解决方案5】：

看看我的小提琴。

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}

<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>

【讨论】：

【解决方案6】：

出于好奇，您可以通过动态创建上传表单和输入文件来做您想做的事情，而无需将其添加到 DOM 树中：

$('.your-button').on('click', function() {
    let uploadForm = document.createElement('form');
    let fileInput = uploadForm.appendChild(document.createElement('input'));
    
    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

无需将uploadForm添加到DOM。

【讨论】：

【解决方案7】：

adardesign 指出文件输入元素在隐藏时会被忽略。我还注意到许多人将元素大小更改为 0，或者通过定位和溢出调整将其推出边界。这些都是很棒的想法。
另一种似乎效果很好的替代方法是只需将不透明度设置为 0。然后你总是可以像 hide 一样设置位置以防止它偏移其他元素。将元素向任何方向移动近 10K 像素似乎有点不必要。

这里有一个小例子供需要的人使用：

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}

【讨论】：

【解决方案8】：

其实我发现了一个很简单的方法，就是：

$('#fileinput').show().trigger('click').hide();

这样，您的文件输入字段可以在 none 上有 css 属性 display 并且仍然可以赢得交易 :)

【讨论】：

它可能会在较慢机器上的屏幕上闪烁。不是最佳解决方案

【解决方案9】：

正确代码：

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>

【讨论】：

【解决方案10】：

这是故意和设计的。这是一个安全问题。

【讨论】：

【解决方案11】：

现在回答为时已晚，但我认为这种最小设置效果最好。我也在找一样的。

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

//css

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

bootstrap file input buttons demo

【讨论】：

【解决方案12】：

这是一个非常古老的问题，但不幸的是，这个问题仍然相关，需要解决方案。

我想出的（非常简单的）解决方案是“隐藏”实际的文件输入字段并用 LABEL 标签包装它（可以基于 Bootstrap 和 HTML5，以进行增强）。

See here:Example code here

这样，真正的文件输入字段是不可见的，你看到的只是自定义的“按钮”，它实际上是一个修改后的 LABEL 元素。当你点击这个 LABEL 元素时，选择文件的窗口就会出现，你选择的文件将进入真正的文件输入字段。

最重要的是，您可以根据需要操作外观和行为（例如：从文件输入文件中获取所选文件的名称，在选择后，并将其显示在某处。LABEL 元素不起作用当然是自动的。我通常只是把它放在 LABEL 里面，作为它的文本内容）。

不过要小心！对其外观和行为的操纵仅限于您可以想象和想到的任何内容。 ;-) ;-)

【讨论】：

【解决方案13】：

我用一个简单的 $(...).click();使用 JQuery 1.6.1

【讨论】：

嗯，很好奇你是怎么做到的，在我的网站 (www.iscriptdesign.com) 上做 $('file:input').click() 没有做任何事情，也没有 $('file :input').trigger('click');
这里是完整的例子：
我在 mac os 上的 cr（不确定是什么版本）上进行了测试，但可以在 XP 上的 FF 4 上运行。谢谢！

【解决方案14】：

或者干脆

$(':input[type="file"]').show().click().hide();

【讨论】：

【解决方案15】：

您可以从 JQuery 中单击输入文件，同时将其完全隐藏。

我正在使用这个：

< input type="file" name="article_input_file" id="article_input_file" accept=".xlsx,.xls" style="display: none" >

$("#article_input_file").click();

这适用于 HTML 页面中的任何标准脚本标记。

【讨论】：

【解决方案16】：

我在使用假按钮触发<input type="file"/> 时遇到了自定义客户端验证问题，@Guillaume Bodi 的解决方案对我有用（也适用于 chrome 上的opacity: 0;）

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

上传输入的css样式

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}

【讨论】：

【解决方案17】：

试试这个，这是一个 hack。 Position:absolute 用于 Chrome，trigger('change') 用于 IE。

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});

【讨论】：

请注意，$.browser 在较新版本的 jQuery 中已弃用

【解决方案18】：

我的问题在 iOS 7 上有点不同。结果是 FastClick 引起了问题。我所要做的就是将class="needsclick" 添加到我的按钮。

【讨论】：

【解决方案19】：

这可能是最好的答案，请记住跨浏览器问题。

CSS：

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

JS：

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML：

<a class="file-upload">Upload</a>
<input type="file" name="file">

【讨论】：

【解决方案20】：

我想我理解你的问题，因为我也有类似的问题。所以标签<label> 具有属性，您可以使用此属性将您的输入与type="file" 链接起来。但是如果你不想使用这个标签来激活它，因为你的布局规则，你可以这样做。

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});

.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>

当然，您会根据自己的目的和布局对其进行调整，但这是我所知道的更容易让它发挥作用的方法！

【讨论】：

【解决方案21】：

根据 Guillaume Bodi 的回答，我这样做了：

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

这意味着它一开始是隐藏的，然后为触发器显示，然后立即再次隐藏。

【讨论】：