Ajax上传文件不起作用

Question

I dont know what wrong with this code but it show an error message "Uncaught TypeError: Illegal invocation"

     $('.upload-document').on("click", function() {
        $(this).parent().append("<input type='file' class='upload-btn' style='visibility:hidden' />");
        $('.upload-btn').click();
        $('.upload-btn').on("change", function(e){
            var file = $(this)[0].files[0];
            $.ajax({
                type: 'POST',
                url: "upload-file.php",
                data: {
                    file: file
                },
                success: function (data) {
                    console.log(data);
                }
            });
        })
    })

Answer 1

Change your code to this:

$('.upload-document').on("click", function () {
    $(this).parent().append("<input type='file' class='upload-btn' style='visibility:hidden' />");
    $('.upload-btn').click();

})
$('body').on("change",'.upload-btn', function (e) {
    var file = $(this)[0].files[0];
    $.ajax({
        type: 'POST',
        url: "upload-file.php",
        data: {
            file: file
        },
        success: function (data) {
            console.log(data);
        }
    });
})