我正在使用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);
}
}
});
}
});
}
您所要做的就是在jQuery准备好时或用户单击按钮插入新的DOM元素时调用它。