Question

我遇到click()功能问题。它在Opera中不起作用。

我正在尝试input type=file点击另一个元素的onclick事件。我需要设置我的输入type=file元素的样式，这样我就使它变得不可见，并用简单的样式按钮替换它。现在我希望在单击按钮时单击文件元素。

我不能使用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()"/>

这是我的JavaScript代码：

function show_upload()
{
    document.getElementById('uploadme').click();
}

我也尝试过这个jQuery代码，但是如果没有与MooTools库发生冲突我就无法工作：

jQuery.noConflict();
(function($){
    $('#clickme').click(function($){
        $('#uploadme').click();
    })(jQuery);
});

Answer 1

input[type=file]是非常奇特的输入类型，你不能真正做很多事情，主要是出于安全考虑。

我猜这里，但你想要你自己的风格上传按钮吗？在这种情况下，我必须让你失望，你不能用HTML做。您必须使用HTML5或Flash（如SWFUpload）

Answer 2

我不确定输入点击（由于安全原因可能不可能），但你的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

无论如何，这个答案说你不能在Opera中做你想做的事：In JavaScript can I make a "click" event fire programmatically for a file input element?

Answer 3

这是一个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>

Answer 4

这不是不可能的：

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

但不知何故，只有在通过点击事件调用的函数中它才有效。

所以你可能有以下设置：

HTML：

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript的：

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

Answer 5

嗯……这对我有用。在 Chrome 中。

<input type='file' id='csvfile'  onclick='reset_upload()'  />

其中 reset_upload() 是一个 jQuery 函数。

Answer 6

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

你可以做那样的事情。唯一的问题是你必须知道这些输入的尺寸。嗯...也许这不是问题。您可以设置尺寸。产品：＆gt;

在输入[type = file]上使用click（）时出现问题

6 个答案: