JQuery 触发器文件输入

小开

那是故意的，是设计好的，这是个安全问题。

小开

我使用简单的 $(...) . click () ; 和 JQuery 1.6.1进行管理

小开

这是由于安全限制。

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

所以我尝试定位它外面的视口设置 position:absolute和 top:-100px;，瞧，它的工作。

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

称之为黑客。

希望对你有用。

小开

这招对我很管用:

约翰逊:

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

HTML:

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

CSS:

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

另一个可以跨浏览器工作的: < <

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

小提琴: 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());
});
});

小开

试试这个，这是一个黑客。位置: 绝对是为 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');
});

小开

我已经在 IE8 + ，最近的 FF 和 chrome 中测试过了:

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

关键是对焦之前点击(否则铬忽略它)。

注意: 您确实需要显示和可见您的输入(例如，不是 display:none，也不是 visibility:hidden)。我建议(就像其他许多人以前做过的那样)绝对定位输入，然后把它从屏幕上扔掉。

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

小开

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

小开

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

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

小开

事实上，我找到了一个很简单的方法，那就是:

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

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

小开

密码正确:

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

小开

或者干脆

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

小开

看看我的小提琴。

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>

小开

现在回答为时已晚，但我认为这个最小的设置工作最好。我也在寻找同样的。

  <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

自举文件输入按钮演示

小开

我的问题在 iOS7上有点不同。结果发现快捷点击引起了一些问题。我所要做的就是把 class="needsclick"加到我的按钮上。

小开

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

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

See here:这里的示例代码

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

最重要的是，您可以按照自己的意愿操作外观和行为(例如: 从文件输入文件中获取选定文件的名称，在选定之后，将其显示在某个地方)。当然，LABEL 元素不会自动执行此操作。我通常只是把它放在标签里面，作为它的文本内容)。

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

小开

考虑到跨浏览器的问题，这可能是最好的答案。

CSS:

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

约翰逊:

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

HTML:

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

小开

我有问题的自定义客户端验证的 <input type="file"/>，而使用一个假按钮触发它和@Guillaume Bodi 的解决方案为我工作(也与 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;
}

小开

可以使用 LABEL 元素前男友。

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

这将触发输入文件

小开

只是出于好奇，您可以通过动态创建一个上传表单和输入文件来做您想做的事情，而不需要将其添加到 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。

小开

我想我明白你的问题了，因为我也有类似的问题。因此标记 <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>

当然，你会适应你自己的目的和布局，但这是更容易的方式，我知道使其工作！

小开

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

我用的是这个:

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


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

这可以在 HTML 页面中的任何标准脚本标记内工作。