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

标签 javascript jquery html file-upload blueimp

我正在使用这个 jquery uploader ( 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();
        });

就像我说的,当我将它添加到实际代码中时,不是动态的就可以了。有人可以帮忙吗?

最佳答案

这是因为您在添加元素之前绑定(bind)了 fileupload 事件。

尝试将您的代码移动到回调函数中,该回调函数将在您创建输入元素后执行。自 appendTo() doesn't support callback , 你可以使用 each(callback):

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

如果你需要在代码的多个地方绑定(bind)事件到.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();
});

我创建了一个 little demo .它绑定(bind) click 而不是 fileupload 来简化事情(fileupload 是外部插件...),但一般规则保持不变。

关于javascript - 动态创建文件输入时 jQuery 文件上传不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19468104/

相关文章:

jquery - 有没有类似于 jqGrid Treegrid 但支持卡住列的类似树网格

javascript - 安装 Angular CLI 时出现错误

javascript - Mapbox GL JS : Refreshing JSON polygons

javascript - 如何在不使用 QML 函数的情况下根据 QQuickItem 的当前值转换其 x 或 y 属性

jquery - 伪元素并监听过渡到结束

html - 为什么::first-line 不适用于预包装?

javascript - jQuery DatePicker 填充输入 - 多次点击问题

javascript - 如何在现有 svg 对象上创建 JQuery 包装器?

javascript - 保持固定的 div 与另一个 div 的特定距离,即使在调整大小时也是如此

html - 有序列表编号和标签未对齐