Question

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

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

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

Answer 1

这是出于安全限制。

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

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

请参阅http://jsfiddle.net/DSARd/1/

称之为黑客。

希望对你有用。

Answer 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;
}

＆gt;＆gt;＆gt;另一个适用于跨浏览器的工作：＆lt;＆lt;＆lt;＆lt;

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

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

Answer 3

您可以使用LABEL元素离。

＆＃13;

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

＆＃13;

这将触发输入文件

Answer 4

我在IE8 +中工作（=测试过），最近的FF和chrome：

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

关键是在之前关注点击（否则Chrome会忽略它）。

注意：您需要显示和显示您的输入（例如，不是display:none而不是visibility:hidden）。我建议（正如之前许多其他人一样）绝对定位输入并将其抛出屏幕。

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

Answer 5

看看我的小提琴。

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

＆＃13;

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

Answer 6

adardesign 在隐藏文件输入元素时将其忽略。我还注意到很多人将元素大小转换为0，或者通过定位和溢出调整将其推出界限。这些都是很棒的想法另一种似乎也能很好地工作的方法是将不透明度设置为0 。然后你总是可以设置位置以防止它像隐藏那样抵消其他元素。在任何方向上移动一个近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);
}

Answer 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。

Answer 8

正确的代码：

<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>

Answer 9

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

Answer 10

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

  <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

Answer 11

我使用简单的$（...）进行管理.Click（）;使用JQuery 1.6.1

Answer 12

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

我提出的（令人惊讶的简单）解决方案是“隐藏”实际的文件输入字段并用LABEL标记包装它（可以基于Bootstrap和HTML5，用于增强）。

df.select($"asset", $"metadata".getItem("state").alias("state")) Example code here

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

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

要小心！对它的外观和行为的操纵仅限于你能想象和想到的任何东西。 ;-); - ）

Answer 13

或者只是

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

Answer 14

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

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

这样，你的文件输入字段可以在 none 上拥有css属性 display 并仍然赢得交易：）

Answer 15

我在<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;
}

Answer 16

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

我正在使用这个：

<td>
    <xsl:value-of select="myEnum:getEnumDescription(myEnum)" />
</td>

这可以在HTML页面中的任何标准脚本标记中使用。

Answer 17

我的问题在iOS 7上有点不同。原来FastClick导致了问题。我所要做的就是在我的按钮上添加class="needsclick"。

Answer 18

试试这个，这是一个黑客。位置：绝对用于Chrome，触发器（'更改'）用于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');
});

Answer 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">

Answer 20

我想我理解您的问题，因为我也有类似的情况。因此，标签numToDo具有属性，您可以使用该属性将输入链接为type =“ file”。但是，如果由于布局规则而不想使用此标签激活此标签，则可以这样做。

<label>

$(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*/
}

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

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

这意味着它隐藏起来然后显示为触发器，然后立即再次隐藏。

jQuery触发器文件输入

21 个答案: