我正在尝试使用 jQupload 异步上传图像。该脚本使用页面外的 iframe 进行上传,然后捕获 iframe 的 .load() 事件以返回返回的 JSON 消息。
如果我在标准 HTML 页面的底部显示表单并包含 javascript,那么它可以正常工作。但是,我想将上传表单加载到模式窗口中,为此我使用了 facebox。因此,该表单包含在页面底部设置为“display:none”的样式标记,并在单击特定按钮时显示在模式窗口中。
在模态窗口中,表单提交没有问题并且 iframe 被填充,但是表单的提交事件的代码没有被 javascript 捕获。我尝试在函数中警告一个简单的字符串,但没有得到任何结果。但是,如果我使用表单的“onsubmit”标签提醒一个字符串,那么它可以正常工作。
下面这行代码执行正常,并在表单中添加了一个目标属性:
$(this).attr("target",data.iframe);
这是在模态窗口中未触发的下一行代码:
$(this).submit(function(){
alert('hello!');
$("#"+data.iframe).load(function(){
var data1=$("#"+data.iframe).contents().find("body").html();
data1='{"formid":{"value":"'+id+'"},'+data1.substr(1);
if($.jQupload.callback[id]){
eval($.jQupload.callback[id]+"('"+data1+"')")
}
else{
if($.jQupload.output[id]){
$.jQupload.jsonMessage(data1)
}
else{
$.jQupload.defaultMessage(data1)
}
}
$("#"+data.iframe).contents().find("body").html("");
$("#"+data.iframe).unbind("load")
})
});
此代码来自使用以下 2 行调用的 jQupload 函数:
$("#image_upload_form").jqupload();
$("#image_upload_form").jqupload_form();
这是完整的 jQupload 代码,并按照http://jqframework.com/jqupload_doc.html中的说明使用:
/* jQupload - jQuery Upload v0.1
* jQupload is distributed under the terms of the MIT license
* For more information visit http://jqframework.com/jqupload
* Copyright (C) 2010 jqframework.com
* Do not remove this copyright message
*/
$.jQupload = {
fadeOutTime:3000,
callback:{},
output:{},
init: function(id,obj){
if(obj.callback){
$.jQupload.callback[id]=obj.callback
}
if(obj.output){
$.jQupload.output[id]=obj.output
}
if(obj.fadeOutTime){
$.jQupload.fadeOutTime=obj.fadeOutTime
}
},
defaultMessage:function(data){
alert(data)
},
jsonMessage:function(data){
eval("data="+data);
$("#"+$.jQupload.output[data.formid.value]).html(data.message).fadeOut($.jQupload.fadeOutTime)
}
};
$.fn.extend({
jqupload:function(obj){
return this.each(function(){
var id=this.id;
if(typeof this.id=="object"){
id=$(this).attr("id")
}
if(!obj)
obj={};
$.jQupload.init(id,obj)
})
},
jqupload_form:function(){
return this.each(function(){
var id=this.id;
if(typeof this.id=="object"){
id=$(this).attr("id")
}
var data=$.extend(
{},
{iframe:id+"_iframe"},
data
);
$("body").append("<iframe name="+data.iframe+' id="'+data.iframe+'"></iframe>');
//$("#"+data.iframe).css({position:"absolute",left:"-1000px",top:"-1000px",width:"0px",height:"0px"});
$("#"+data.iframe).css({position:"absolute",left:"0px",top:"0px",width:"500px",height:"500px"});
$(this).attr("target",data.iframe);
$(this).submit(function(){
$("#"+data.iframe).load(function(){
var data1=$("#"+data.iframe).contents().find("body").html();
data1='{"formid":{"value":"'+id+'"},'+data1.substr(1);
if($.jQupload.callback[id]){
eval($.jQupload.callback[id]+"('"+data1+"')")
}
else{
if($.jQupload.output[id]){
}
$.jQupload.jsonMessage(data1)
else{
$.jQupload.defaultMessage(data1)
}
}
$("#"+data.iframe).contents().find("body").html("");
$("#"+data.iframe).unbind("load")
})
});
return true
})
}
});
有任何想法吗?