$('element').click() 不工作答案

【问题标题】：$('element').click() not working$('element').click() 不工作
【发布时间】：2015-08-26 11:18:41
【问题描述】：

这是我的文件输入元素：

<input type="file" id="StudentPhoto" value="StudentPhoto" style="display: none;">

这是验证函数：

$(document).ready(function() {
    $('#StudentPhoto').change(function()
    {
        var file_data = $("#StudentPhoto").prop("files")[0];
        var size = file_data.size;
        var type = file_data.type;
        var name = file_data.name;
        var input = $("#StudentPhoto");

        if(type !== 'image/png' && type !== 'image/jpg' && type !== 'image/jpeg')
        {
            alert("Only JPG & PNG files are allowed to upload as student photo.");
            $('#StudentPhoto').click();
        }
        else if(size > 2097152)
        {
            alert("The maximum photo size is 2MB\n");
            $('#StudentPhoto').click();
        }
    });
});

如果用户选择的文件的格式或大小无效，应该会弹出对话框让他重新选择文件，但没有，函数中的语句$('#StudentPhoto').click();没有工作。为什么？还有其他方法吗？

【问题讨论】：

它是一个文件输入，所以点击事件肯定是显示窗口并让用户选择文件
它也不起作用@ArunPJohny
对不起...我的意思是doesn't...错过了
您应该在<input type="file"> 中使用accept 属性，而不是在JS 中签入。
不是真正的解决方法，但您可以通过设置accept='.jpg | .jpeg | .png' 属性来限制文件类型。当您提交表单而不是单击文件对话框的 open 按钮时，可能可以完成文件大小限制...

标签： javascript jquery

【解决方案1】：

或者您可以使用.trigger() 方法在按钮上触发点击事件。我们还将使用input，因为您已经存储了文件字段。

input.trigger('click');

希望这会有所帮助。

【讨论】：

它在同一元素的更改处理程序中不起作用 - 至少在 chrome 中
$('#StudentPhoto').click();和input.trigger('click');有什么区别

【解决方案2】：

您可以使用 HTML DOM click() 方法：

document.getElementById('StudentPhoto').click();

【讨论】：

我找到了这个答案。它可以帮助您了解您的问题。 stackoverflow.com/a/25886585/3861639
@shess 但是我的文件输入的.click() 函数在其他函数/条件下工作。
这个答案不相关。如果jQuery在其他情况下工作，这个传统的JS点击与jQuery版本的.click()相同。

【解决方案3】：

将您的文件输入元素更改为：

<input type="file" id="StudentPhoto" value="StudentPhoto" style="visibility: hidden">

请注意，我使用的是visibility: hidden，而不是display: none。

您不能在未显示的文件输入上调用点击事件。

【讨论】：

【解决方案4】：

试试这个：

$(function() {
    function onStudentPhotoChange($element) {
        var file_data = $element.prop("files")[0];
        var size = file_data.size;
        var type = file_data.type;
        var name = file_data.name;

        switch(true) {
          case (type !== 'image/png' && type !== 'image/jpg' && type !== 'image/jpeg') :
            alert("Only JPG & PNG files are allowed to upload as student photo.");
            onStudentPhotoChange($element);
            break;

          case (size > 2097152) :
            alert("The maximum photo size is 2MB\n");
            onStudentPhotoChange($element);
            break;
        }
    }

    $('#StudentPhoto').change(function()
    {
        onStudentPhotoChange($this);
    });
});

【讨论】：

【解决方案5】：

你需要在点击事件中插入你的回调：

    $(document).ready(function()
        {
            $('#StudentPhoto').change(function()
            { 
                var file_data = $("#StudentPhoto").prop("files")[0];
                var size = file_data.size;
                var type = file_data.type;
                var name = file_data.name;
                var input = $("#StudentPhoto");

                if(type !== 'image/png' && type !== 'image/jpg' && type !== 'image/jpeg')
                {
                    alert("Only JPG & PNG files are allowed to upload as student photo.");
                    $('#StudentPhoto').click();
                }
                else if(size > 2097152)
                {

                    $('#StudentPhoto').click(function(){
alert("The maximum photo size is 2MB\n");
});
                }
            });
    });

【讨论】：

你误解了我的问题
嗨，阿勇，您的问题能具体一点吗？