upload.php的

Question

我正在使用Jquery表单插件。

弹出窗口显示图像上传表格。图像上传成功。我想在成功上传图片后关闭弹出窗口。以下javascript是用弹出内容编写的。

$(this).ajaxSubmit({    
  success: function(dd) {
   parent.$.fancybox.close();
  }
});

但它不起作用。 Jquery库，包含在弹出内容和父页面中的fancybox库。

此外，我想再次使用加载了“dd（ajax返回值）”的内容重新加载fancybox。它将具有Jcrop功能。

现在，一旦用于上传图像的ajaxSubmit，Jcrop就无法正常工作。否则它正在运作

EDIT 我重命名了page1 page2和page3以便更好地理解的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth    : 800,
maxHeight   : 600,
fitToView   : false,
width       : '70%',
height      : '100%',
autoSize    : false,
closeClick  : false,
openEffect  : 'none',
closeEffect : 'none'
});
});
</script>
</head>
<body>
<a href="upload.php" class="various fancybox.ajax">Upload</a>
</body>
</html>

upload.php的

<div class="result">
<form method="post" id="form" class="form" action="test.php" enctype="multipart/form-data">

<div>
<label>Upload Image : </label>
    <input type="file" name="user_photo" value="" />
</div>          
<div>       
    <input type="submit" value="Upload" />
</div>

</form> 
</div>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#form").submit(function() {
     $(this).ajaxSubmit({
             beforeSubmit: function(before) {

             },
             success: function(dd) {
                 $('.result').html(dd);
             }
     }); 
     return false;
 });
 });
</script>

test.php包含（我只是用静态图像测试。没有在这里写上传脚本。）

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<script language="Javascript">      
     $(function(){          
         $('#cropbox').Jcrop({  }); });    
</script>
<img src="images.jpg" id="cropbox" />

Jcrop无法使用此方法。如果我跳过upload.php步骤，jcrop在fancybox中工作正常。所以我需要在上传后删除并创建一个新的fancybox！

编辑结束

Answer 1

试试这个



var fancyboxProxy = $.fancybox;

$(this).ajaxSubmit({    
  success: function(dd) {
   fancyboxProxy.close();
  }
});

var fancyboxProxy = $.fancybox; $(this).ajaxSubmit({ success: function(dd) { fancyboxProxy.close(); } });

修改

我修复了它将所有js放在index.php中并使用jquery live来设置事件监听器

$(document).ready(function () { $(".various").fancybox({ maxWidth: 800, maxHeight: 600, fitToView: false, width: '70%', height: '100%', autoSize: false, closeClick: false, openEffect: 'none', closeEffect: 'none' }); $("#form").live('submit', function () { $(this).ajaxSubmit({ beforeSubmit: function (before) { }, success: function (dd) { $.fancybox.close(); } }); return false; }); });

demo

source

干杯

Answer 2

感谢好的代码。

只需在test.php文件中插入以下代码即可。在根目录中创建上传文件夹。

<?php 
$path = 'upload';

$name = $_FILES["user_photo"]["name"];
if (move_uploaded_file($_FILES['user_photo']['tmp_name'], $path.'/'.$name)) {
    echo '<img src="'.$path.'/'.$name.'" width="250" />';
} else {
    print "Upload failed!";
}
?>

你会得到完美的结果。

如何在Ajax提交后关闭fancybox？

upload.php的

2 个答案: