php - 将 Uploadify 应用于新的 DOM 元素

Question

我正在使用 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，但我只是将其用作临时选择器，直到我知道整个事情正常运行并将使用更动态的内容...

Answer 1

要实现此功能，您需要将所有内容包装在一个函数中，该函数在页面加载时以及将来需要时调用。所以类似:

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);
                    }
                }
            });
        }
    });
}

您所要做的就是在 jQuery 准备就绪或用户单击按钮插入新的 DOM 元素时调用此函数。