1

Jqueryフォームプラグインを使用しています。

画像アップロードフォームでポップアップが表示されます。画像が正常にアップロードされました。画像のアップロードに成功したら、ポップアップを閉じたいです。以下のJavaScriptはポップアップコンテンツで書かれています。

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

しかし、それは機能していません。Jqueryライブラリ、ポップアップコンテンツと親ページに含まれるfancyboxライブラリ。

さらに、「dd（ajax return value）」コンテンツがロードされた状態で、ファンシーボックスを再度リロードしたいと思います。Jcrop機能があります。

現在、ajaxSubmitが画像のアップロードに使用されると、Jcropは機能しなくなります。それ以外の場合は機能しています

編集index.htmlをよりよく理解するために、page1、page2、page3の名前を変更しました

<!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で正常に機能しています。だから私はアップロード後に新しいファンシーボックスを削除して作成する必要があります！

編集終了

4

2 に答える 2

2

これを試して 

var fancyboxProxy = $.fancybox;

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

編集：

すべてのjsをindex.phpに入れ、jqueryliveを使用してイベントリスナーを設定する問題を修正しました 

$(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;
    });

});

デモ

ソース

乾杯

于 2012-02-16T15:32:58.233 に答える
0

素敵なコードをありがとう。

以下のコードを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!";
}
?>

あなたはあなたの完璧な結果を得るでしょう。

于 2013-07-29T10:21:23.347 に答える