在JavaScript中，我可以让一个“点击”事件火的文件输入元素编程?

我想通过编程方式在<input type="file">标记上生成一个点击事件。

仅仅调用click()似乎没有做任何事情，或者至少它不会弹出一个文件选择对话框。

我一直在尝试使用侦听器捕获事件并重定向事件，但我还不能像某人点击它那样实际执行事件。

当前回答

如果你想让click方法在Chrome、Firefox等浏览器上也能工作，请将下面的样式应用到输入文件中。它会被完全隐藏起来，就像你在做一个显示一样:没有;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

就是这么简单，我测试过了!

2011-12-27 12:29:39

其他回答

工作方案

让我在这篇旧文章中补充一点，我曾经使用的一个有效的解决方案，在80%或以上的新老浏览器中都有效。

解决方案复杂而简单。第一步是使用CSS和伪装输入文件类型的“下元素”，显示通过，因为它的不透明度为0。下一步是根据需要使用JavaScript更新其标签。

如果你想要一个快速访问特定元素的方法，ID只是简单地插入，然而，类是必须的，因为它们与设置整个过程的CSS有关

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

请记住，颜色和字体样式等完全是你的偏好，如果你使用这个基本的CSS，你可以随时使用后端标记到你喜欢的样式，这在jsFiddle最后列出。

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript的纯粹和真实，然而，一些旧的(退休的)浏览器可能仍然有问题(像netscrap2 !)

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

工作jsFiddle示例

2012-10-10 19:25:25

这是可能的: 在FF4+、Opera ?、Chrome下: 但是:

inputElement.click()应该从用户操作上下文中调用!(不是脚本执行上下文) <input type="file" />应该是可见的。Display !== 'none')(你可以用可见性或其他东西隐藏它，但不能用" Display "属性)

2012-01-19 10:23:21

JS fiddle.net/eyedean/1bw357kw/

popFileSelector = function() { var el = document.getElementById("fileElem"); if (el) { el.click(); } }; window.popRightAway = function() { document.getElementById('log').innerHTML += 'I am right away!<br />'; popFileSelector(); }; window.popWithDelay = function() { document.getElementById('log').innerHTML += 'I am gonna delay!<br />'; window.setTimeout(function() { document.getElementById('log').innerHTML += 'I was delayed!<br />'; popFileSelector(); }, 1000); }; <body> <form> <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" /> </form> <a onclick="popRightAway()" href="#">Pop Now</a> <br /> <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a> <div id="log">Log: <br /></div> </body>

2014-10-31 18:35:44

你可以使用

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>

2016-03-29 09:58:25

我的解决方案Safari与jQuery和jQuery-ui:

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

2012-03-07 17:42:10

在JavaScript中，我可以让一个“点击”事件火的文件输入元素编程?

推荐文章

最新文章

标签