Javascript 在输入 [type=file] 上使用 click() 时出现问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6974228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problem using click() on input[type=file]
提问by Rafael Sedrakyan
I'm having a problem with the click()functon. It does not work in Opera.
我的功能有问题click()。它在 Opera 中不起作用。
I am trying to make a input type=fileclicked on onclickevent of another element. I need to style my input type=fileelement so I made it invisible and replaced it with simple styled button. Now I want file element to be clicked when button is clicked.
我正在尝试input type=file点击onclick另一个元素的事件。我需要设置我的输入type=file元素的样式，所以我让它不可见并用简单样式的按钮替换它。现在我希望在单击按钮时单击文件元素。
I can't use jQuery because I am using the MooTools library for a calendar in my page and it makes conflict when I try to use jQuery. I also tried to avoid the conflict using jQuery.noConflict();but I could not do it because I am new to jQuery. Here is my html code:
我不能使用 jQuery，因为我在我的页面中使用 MooTools 库作为日历，当我尝试使用 jQuery 时它会产生冲突。我也试图避免使用冲突，jQuery.noConflict();但我无法做到，因为我是 jQuery 的新手。这是我的 html 代码：
<input name="myfile" id="uploadme" type="file" style="visibility:hidden; width:1px;" onchange="this.form.submit()"/>
<input type="button" id="clickme" onclick="show_upload()"/>
And here is my JavaScript code:
这是我的 JavaScript 代码：
function show_upload()
{
document.getElementById('uploadme').click();
}
I also tried this jQuery code but I could not make it work without conflict with the MooTools library:
我也试过这个 jQuery 代码，但我无法让它在不与 MooTools 库冲突的情况下工作：
jQuery.noConflict();
(function($){
$('#clickme').click(function($){
$('#uploadme').click();
})(jQuery);
});
采纳答案by pimvdb
I'm not sure for the input click (it might just be impossible due to security reasons), but your jQuery code is not completely correct.
我不确定输入点击（由于安全原因，这可能是不可能的），但您的 jQuery 代码并不完全正确。
jQuery.noConflict();
(function($){
$('#clickme').click(function(){ // The $ is not necessary - you already have it
$('#uploadme').click();
}); // You should remove (jQuery) because you don't want to call the function here
})(jQuery); // you need (jQuery) to actually call the function - you only defined the function
Anyway, this answer says you cannot do what you want in Opera: In JavaScript can I make a "click" event fire programmatically for a file input element?
无论如何，这个答案说你不能在 Opera 中做你想做的事：在 JavaScript 中，我可以为文件输入元素以编程方式触发“点击”事件吗？
回答by Halcyon
input[type=file]is very peculiar input type, you can't really do a whole lot with it, primarily for security reasons.
input[type=file]是非常奇特的输入类型，你不能用它做很多事情，主要是出于安全原因。
I'm guessing here, but do you perhaps want you own styled upload button? In that case I must disappoint you, you can't do it with HTML. You'll either have to use HTML5 or Flash (like SWFUpload)
我在这里猜测，但是您是否想要自己的样式上传按钮？在那种情况下，我必须让你失望，你不能用 HTML 来做到这一点。您必须使用 HTML5 或 Flash（如 SWFUpload）
回答by Pavel Perminov
It's an Opera bug, but there is possibility to get the result by a different way, using <label>tag:
这是一个 Opera 错误，但有可能通过不同的方式获得结果，使用<label>标签：
<input type="file" id="file" style="position: absolute; visibility: hidden;">
<label for="file" id="file-label"></label>
<a onclick="$('#file-label').click()">Browse..</a>
回答by EscapeNetscape
it's not impossible:
这并非不可能：
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);
But somehow it works only if this is in a function which was called via a click-event.
但不知何故，它只有在通过点击事件调用的函数中才有效。
So you might have following setup:
所以你可能有以下设置：
html:
html：
<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">
JavaScript:
JavaScript：
function openFileChooser() {
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function()
{
document.getElementById('input_img').dispatchEvent(evObj);
},100);
}
回答by EscapeNetscape
It's impossible to click that button using JavaScript (like friends have said) but see this:
使用 JavaScript 不可能点击那个按钮（就像朋友说的那样），但请看：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem ipsum</title>
</head>
<body>
<input type="file" id="first" style="width:200px; background-color:red">
<input type="file" id="second" style="width:200px; background-color:green; position:relative; left:-100px; opacity:0">
<script>
document.getElementById("first").onchange = function(){alert("first")}
document.getElementById("second").onchange = function(){alert("second")}
</script>
</body>
</html>
You can do something like that. Only problem is that you have to know dimensions of these inputs. Hm... Maybe it's not problem. You can set dimensions. :>
你可以做类似的事情。唯一的问题是您必须知道这些输入的维度。嗯...也许这不是问题。您可以设置尺寸。:>
