将Uploadify应用于新的DOM元素 - Applying Uploadify to new DOM elements

Applying Uploadify to new DOM elements

本文关键字：DOM 元素 Uploadify 应用于 | 更新日期: 2023-09-27

我正在使用jQuery插件Uploadify将视频上传到我的服务器。一旦页面加载，它就会找到具有特定类名的所有文件输入元素，并调用一个实例化Uploadify函数的函数：

$(document).ready(function(){
   $(".video_upload").each(function(){
       var t = $(this);
       var f = $("#"+i).siblings(".show_file");
       f.hide();
       setupUpload(t,f);
   });
});
function setupUpload(t,f){
    t.uploadify({
        'uploader'      : '<?=site_url('../assets/js/uploadify/uploadify.swf');?>',
        'script'        : '<?=site_url('utility/send_vid');?>',
        'cancelImg'     : '<?=site_url('../assets/js/uploadify/cancel.png');?>',
        'folder'        : '/uploads/',
        'auto'          : true,
        'onComplete'    : function(event, ID, fileObj, response, data) {
            var r = $.parseJSON(response);
            if(r.error){
                $("#"+i).siblings(".error").html(r.reason).show();
            }else{
                $("#"+i).siblings("#video_href").val(r.src);
                setTimeout(function(){
                    f.children('.file_name').text(r.nice_name);
                    f.show();
                },1000);
            }
        }
    });
}

这一切都很完美。我现在想做的是，当用户单击特定按钮时，在页面中插入一个新的文件输入元素。因此，他们点击按钮，插入一个新的文件输入元素，该元素需要被Uploadify抓取并像其他输入一样进行转换。

插入新元素后，我尝试调用setupUpload()函数，但它不起作用。这种函数只在页面加载时起作用，还是可以随时调用？

编辑：

目前，我正在使用以下参数调用setupUpload（）函数：

    var t = $("#ind_video_2");
    var f = t.siblings(".show_file");
    setupUpload(t,f);

ID是新元素的ID，但我只是把它用作一个临时选择器，直到我知道整个过程有效，并将使用更动态的东西。。。

要实现这一点，您需要将所有内容封装在一个函数中，该函数在页面加载时以及将来需要时调用。所以类似于：

function setupUpload(){
    $(".video_upload").each(function(){
        var t = $(this);
        if(t.siblings('.uploadifyQueue').length==0){
            var f = t.siblings(".show_file");
            t.uploadify({
                'uploader'      : '<?=site_url('../assets/js/uploadify/uploadify.swf');?>',
                'script'        : '<?=site_url('utility/send_vid');?>',
                'cancelImg'     : '<?=site_url('../assets/js/uploadify/cancel.png');?>',
                'folder'        : '/uploads/',
                'auto'          : true,
                'onComplete'    : function(event, ID, fileObj, response, data) {
                    var r = $.parseJSON(response);
                    if(r.error){
                        t.siblings(".error").html(r.reason).show();
                    }else{
                        t.siblings("#video_href").val(r.src);
                        setTimeout(function(){
                            f.children('.file_name').text(r.nice_name);
                            f.show();
                        },1000);
                    }
                }
            });
        }
    });
}