jQuery 选择文件时弹出消息不起作用

Question

我正在尝试在用户单击 input[type=file]

时向用户添加一些带有消息（“确保您正在上传 PDF 文件”）的弹出消息

问题是弹出消息显示的太晚了。我在弹出消息

之前获取文件系统 window

    <input type="file" id="file" name="" required="required" class=" form-control">    
    $(function() {
    $("#file").on("click",function(e){
                        $( "#dialog-message" ).dialog({
                            modal: true,
                            buttons: {
                                Ok: function() {                           
                                    $( this ).dialog( "close" );

                                }
                            }
                        });
                    });
});

有人可以帮忙吗？

FIDDLE Here

Answer 1

编写如下代码:-

 $( "#dialog-message" ).dialog({
                            modal: true,
                            buttons: {
                                Ok: function() {                           
                                    $( this ).dialog( "close" );

                                }
                            }
                        });

$("#file").on("click",function(e){
       $( "#dialog-message" ).dialog( "open" );
});

点击事件打开对话框并将对话框代码置于点击事件之外！

Answer 2

已编辑 好吧我误会了。我认为没有办法首先停止文件系统 window 工作（无论如何，也许我错了，但我已经尝试了很多方法）。
所以你应该有其他元素并向它添加点击事件以触发隐藏的 file input 。

 $(function() {
    $("input#file_fake").on("click",function(e){
        e.preventDefault();
        $( "#dialog-message" ).dialog({
            modal: true,
            buttons: {
                Ok: function() {                           
                    $( this ).dialog( "close" );
                    $("input#file_real").trigger('click');
                }
            }
         });         
    });   
});

这段代码我假设你希望它看起来像file input所以我添加了一个假文件输入。
这是示例：jsfiddle

jQuery 选择文件时弹出消息不起作用

jQuery choose file with a popup message not working

jquery

user-input

jquery-ui