动态创建文件输入时，jQuery 文件上传不起作用

jQuery File Upload not working when file input dynamically created

本文关键字：文件 jQuery 不起作用 创建 输入 动态      更新时间：2023-09-26

我正在使用这个 jquery 上传器 （http://blueimp.github.io/jQuery-File-Upload/basic.html），当文件输入放入站点的原始代码中时，它工作正常，但是我使用 jquery 动态附加字段并且它不起作用。 以下是触发上传的 jQuery：

$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            alert(file.name);
            //$('<p/>').text(file.name).appendTo(document.body);
        });
    }
});

这是应该触发上传的内容：

<input class="fileupload" type="file" name="files[]" data-url="uploads/">

下面是 jquery 附加的代码：

$(document).on('click','.addItem', function(){
            $('<!--ROW START-->'
                <form class="widget-content item" data-url="uploads/">'
                    <div class="row">'
                        <div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>'
                        <div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>'
                        <div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>'
                        <input type="hidden" class="itemId" name="itemId[]" value="">'
                        <input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">'
                        <input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'">'
                        <div class="col-md-2">'
                            <div class="fileinput-holder input-group">'
                                <input class="fileupload" type="file" name="files[]">'
                            </div>'
                        </div>'
                        <div class="col-md-1 align-center"><i class="save icon-ok large"> </i>&nbsp;&nbsp;&nbsp;<i class="delete icon-trash large"> </i></div>'
                    </div>'
                </form>'
            <!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
            $(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
        });

就像我说的，当我将其添加到实际代码中时，而不是动态的。有人可以帮忙吗？

这是因为

您在添加元素之前绑定fileupload事件。

尝试将代码移动到回调函数中，该函数将在创建输入元素后执行。由于appendTo()不支持回调，因此可以使用each(callback)：

$('code_that_you_append').appendTo('some_element').each(function () {
    // here goes $('.fileupload').fileupload({ ... }) function
});

如果需要在代码中的多个位置将事件绑定到.fileupload，可以创建一个函数来避免代码重复，如下所示：

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
            });
        }
    });
};

然后在回调中调用它，就像以前一样：

$('code_that_you_append').appendTo('some_element').each(function () {
    bindFileUpload();
});

我创建了一个小演示。它绑定click而不是fileupload以简化事情（文件上传是外部插件......），但一般规则保持不变。

你需要使用 jQuery live（） 函数。

我

发现这个技巧对我有用。

j查询文件上传动态添加的输入字段

首先只需将上传函数与静态标识符绑定即可。在这里，"文档"是静态标识符。您可以使用尚未动态添加的此类内容。通常，文档的使用频率更高。

$(document).on('click', '.fileupload', function () {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
                //$('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

注意：请先查看接受的答案。

我认为接受的答案几乎没有错误。我只是想恢复它。在 @Micha ł Rybak 小演示中，您将看到每次我们单击add item另一个单击事件也会添加到之前添加的new link（添加更多然后new link并查看第一个new link显示警报次数的时间new item）。因为每次添加new link时，我们都会再次向所有new link元素添加点击事件。

 $('<p><a href="#" class="link">new link</a></p>').appendTo('body').each(function () {
      // bindClickToLink call every 'new link' and add click event on it
        bindClickToLink();
    });

要解决此问题，请改为将单击事件添加到我们刚刚添加到新创建项目的所有项目中。这是我的解决方案我的演示.

相关文章：