这是一个不错的小ajax上传代码片段,它会在成功上传或文件太大的情况下通过ajax返回消息......那种事情。在upload.php中,我有div,其中包含返回到表单页面的消息。我想知道如何修改这个以便将div /消息返回到模态窗口而不是仅返回到页面本身...希望有人可以帮助我。我需要在某个地方使用jquery ui吗?谢谢,伙计们!
$j(document).ready(function(){
var upload = new AjaxUpload('#userfile', {
//upload script
action: '/modules/mod_artuploader/upload.php',
onSubmit : function(file, extension){
//show loading animation
//$j("#loading").show();
//check file extension
if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){
// extension is not allowed
$j("#loading").hide();
$j("<span class='error'>Error: Not a valid file extension</span>").appendTo("#file_holder #errormes");
// cancel upload
return false;
} else {
// get rid of error
$j('.error').hide();
}
//send the data
upload.setData({'file': file, 'userid': <?php echo $user->id?> });
},
onComplete : function(file, response){
//hide the loading animation
$j("#loading").hide();
$j("#userfile").hide();
$j('label[for="userfile"]').hide();
//add display:block to success message holder
$j(".success").css("display", "block");
$j(".picture").css("display", "block");
//This lower portion gets the error message from upload.php file and appends it to our specifed error message block
//find the div in the iFrame and append to error message
var oBody = $j(".iframe").contents().find("div");
//add the iFrame to the errormes td
$j(oBody).appendTo("#file_holder #errormes");
}
});
});
</script>
答案 0 :(得分:0)
这实际上取决于你用于模态的内容。如果您正在讨论单独的浏览器窗口,浮动未对接或在新选项卡中,这是一个非常复杂的问题需要解决。自从你提出它以来,jQuery UI对话框是一个很好的选择。看一下modal form示例。用户可以单击“上传”按钮,使用文件选择器激活模态弹出窗口。您可以使用$(foo).dialog('open')
和$(foo).dialog('close')
切换对话框的显示。然后上传脚本可以只存在于对话框中并与其中的元素进行交互。至少,我认为你的回调将能够通过appendTo调用对话框。您可能最终需要做的是打开一个上传对话框,等待回复,然后关闭它并打开另一个结果。