jquery $('element').click()不起作用

pokxtpni  于 2023-02-08  发布在  jQuery
关注(0)|答案(4)|浏览(244)

这是我的文件输入元素:
<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();语句不起作用,为什么?还有其他方法吗?

rmbxnbpk

rmbxnbpk1#

或者你也可以使用.trigger()方法来触发按钮上的click事件,因为你已经保存了文件字段,所以我们也将使用input

input.trigger('click');

希望这个有用。

xqnpmsa8

xqnpmsa82#

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

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

knpiaxh13#

将文件输入元素更改为:
<input type="file" id="StudentPhoto" value="StudentPhoto" style="visibility: hidden">
注意,我使用的是visibility: hidden,而不是display: none
不能调用非显示文件输入的click事件。

f2uvfpb9

f2uvfpb94#

您需要在click事件中插入回调:

$(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");
});
                }
            });
    });

相关问题