jQuery触发文件输入

163

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

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

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

javascript  jquery  css 
— 亚历克斯·斯玛特
source
你可以尝试像这样来代替。
— Kirtan
19
有没有办法做到这一点？真令人沮丧
— Marcus Downing
确实令人沮丧，是由“点击”触发的吗？我更喜欢Flash / AS3，它具有紧密的API和强大的安全模型，仅允许从用户启动的输入事件处理程序调用FileReference.browse。此外，HTML文件的输入很丑陋且无法样式化（它只是一个输入标签，内容和样式的分隔非常重要），因此您必须制作一个新的``浏览''按钮，该按钮也可以通过click事件来激活...您必须单击一下才能将其转发到文件输入...这可能导致无限递归，具体取决于元素放置和事件委托的特异性。
— Triynko
不幸的是，鉴于其不断出现的安全问题以及内容阻止程序的兴起，使用Flash变得越来越不可行。
— 蒂姆（Tim）

Answers:

195

这是由于安全限制。

我发现安全限制仅在将<input type="file"/>设置为display:none;或为时进行visbilty:hidden。

因此，我尝试通过设置position:absolute和top:-100px;使其工作在视口之外。

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

称其为hack。

希望对您有用。

— 阿达尔设计
source
4
在ff 3.6中不起作用。可以在chrome甚至在ie 8中使用:)
— AyKarsi 2011年
4
关于安全限制，在msdn上是否有任何文档？
— eomeroff 2012年
2
效果很好。无论如何，我认为设置一个更安全left: -100px;。您永远都不会知道一页会有多长时间
— Alter Lagos 2012年
+1这是真正的答案（也是一个好的解决方案）。有人可以在明确说明的地方链接到文档吗？
— kontur 2012年
9
您也可以将不透明度设置为0
— Stuart
109

这为我工作：

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());
    });
});
— 雪橇
source
有一个缺陷，如果使按钮变宽，则在IE9 / 10中，不可见的上载按钮由右按钮和左文本字段组成。为此，您必须双击。在这种情况下，请尝试将字体大小设置为甚至大于100像素；
— yunzen 2014年
即使在Chrome 53中也可以使用。但是，height建议将其更改为height: 100%
— Raptor
第二个甚至可以在iOS的Safari中使用。非常好！
— 詹尼斯，
69

您可以使用LABEL元素ex。

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

这将触发输入文件

— 詹·雷（Jhon Rey）
source
5
为什么这不是公认的答案？这是不需要时髦javascript的最简单方法。
— tomitrescak
@tomitrescak OP不在等待获得最佳答案。
— Mahi
9
请记住，答案是在问题提交7年后发布的。
1
同样是2018年的最佳答案。
— masoomyf
1
2019年的最佳答案也是;）
— guillaumepotier
17

我有它在IE8 +，最近的FF和chrome中工作（已测试）：

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

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

注意：您需要显示和显示您的输入（如in，not display:none和not visibility:hidden）。我建议（像其他许多人一样）绝对定位输入并将其扔出屏幕。

#uploadInput {
    position: absolute;
    left: -9999px;
}
— 强大的橡皮鸭
source
1
+1。我还注意到，您可以隐藏周围的元素，但不能隐藏文件输入按钮，然后显示周围的元素，聚焦该按钮，激活它，然后隐藏该按钮。
— Stevo 2012年
10

看看我的小提琴。

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>
展开摘要

— 莫汉
source
9

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);
}
— 眼药膏
source
7

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

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

无需将uploadForm添加到DOM。

— 耶尔亨贝托
source
1
谢谢！我一直在寻找这个20分钟！
— Labo
5

正确的代码：

<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>
— E9西斯特马斯
source
4

实际上，我发现了一个非常简单的方法，它是：

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

这样，您的文件输入字段可以不显示 css属性，但仍然可以赢得交易:)

— Skywlkr
source
它可能会在速度较慢的计算机上在屏幕上滑动。不是最佳解决方案
— Dmitry Efimenko 2013年
4

现在回答还为时已晚，但我认为这种最小的设置效果最好。我也在寻找相同的东西。

  <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

引导文件输入按钮演示

— 纳特瓦尔·辛格（Natwar Singh）
source
永远不会迟到;）
— AGuyCalledGerald
数年后仍然是IMO的最佳答案
— DimmuR'5
4

这是一个非常老的问题，但是不幸的是，这个问题仍然很重要，需要解决。

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

See here:此处的示例代码

这样，实际文件输入字段是不可见的，您所看到的只是自定义的“按钮”，它实际上是修改后的LABEL元素。当您单击此LABEL元素时，将出现一个用于选择文件的窗口，并且您选择的文件将进入真实文件输入字段。

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

不过要当心！对外观和行为的操纵仅限于您可以想象和想到的。;-) ;-)

— 库伯曼
source
3

我用一个简单的$（...）。click（）;来管理。使用JQuery 1.6.1

— 瓦伦丁·加利亚（Valentin Galea）
source
1
嗯，很好奇您是如何做到的，在我的网站（www.iscriptdesign.com）上执行$（'file：input'）。click（）不会执行任何操作，$（'file：input'）。trigger（'点击”）；
— 博士杰里
这是完整的示例：<input type =“ file” id =“ picBrowse” ...然后$（'＃picBrowse'）。click（）;
— Valentin Galea
我在Mac OS上的cr（不确定哪个版本）上进行了测试，但是在XP的FF 4上却可以工作。谢谢！
— 博士杰里
2

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

$("#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;
}
— 阿敏·K
source
1

试试这个，这是一个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');
});
— 薄蛋白
source
请注意，$.browser在较新版本的jQuery中已弃用
— Kevin Beal，2013年
1

我的问题在iOS 7上有点不同。事实证明FastClick引起了问题。我要做的就是添加class="needsclick"到我的按钮。

— 敏捷
source
0

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

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">
— 埃德斯特斯
source
0

我想我了解您的问题，因为我也有类似的情况。因此，标记<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>
展开摘要

当然，您可以根据自己的目的和布局进行调整，但这是我知道使其更容易实现的方式！

— 莱昂纳多·林德罗斯
source
-1

基于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();
});

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

— Stevo
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.