jQuery触发文件输入

2020/10/26 13:43 · javascript ·  · 0评论

我正在尝试使用jQuery触发一个上传框(浏览按钮)。

我现在尝试的方法是:

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

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

这是由于安全限制。

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

因此,我尝试通过设置position:absolutetop:-100px;使其工作在视口之外

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

称其为hack。

希望对您有用。

这为我工作:

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

您可以使用LABEL元素ex。

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

这将触发输入文件

I have it working (=tested) in IE8+, recent FF and chrome:

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

The key is focusing before firing the click (otherwise chrome ignores it).

Note: you do NEED to have your input displayed and visible (as in, not display:none and not visibility:hidden).
I suggest (as many other have before) to absolutely position the input and throw it off screen.

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

看看我的小提琴。

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>

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

只是出于好奇,您可以通过动态创建一个上传表单和输入文件,而无需将其添加到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。

正确的代码:

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

这是有目的和有计划的。这是一个安全问题。

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

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

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

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

  <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

引导文件输入按钮演示

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

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

See here:此处的示例代码

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

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

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

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

否则就简单地

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

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

试试这个,这是一个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');
});

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

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

我正在使用这个:

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

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

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

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

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

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

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

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

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

本文地址:http://javascript.askforanswer.com/jquerychufawenjianshuru.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!