将Uploadify应用于新的DOM元素

时间:2012-02-04 20:21:50

标签: php javascript jquery uploadify

我正在使用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,但我只是将它用作临时选择器,直到我知道整个事情有效并将使用更动态的东西......

1 个答案:

答案 0 :(得分:0)

要使其正常工作,您需要将所有内容包装在一个函数中,该函数在页面加载时调用,并在将来需要时。如下所示:

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元素时调用此方法。