0

現在 Jcrop を使用していますが、Chrome と Safari で問題が発生しています。

画像をアップロードすると、Jcrop が画像にバインドされるため、ディメンションをドラッグし、inspect 要素を使用して、ディメンションがフィールドに正しく更新されていることを確認できます。ただし、画像の切り抜きボタンをクリックしても、クロムまたはサファリでイベントが発生しません。問題を探しましたが、見つかりません。写真の ajax アップロードがあり、写真をカラーボックスにロードしているため、次のコードを使用する必要がありました。

クロッピングセクション

$(document).on("submit", "#resize", function (e) {
    e.preventDefault();
    $(".loadgif").css("display", "none");
    var t = $("#resizeimage").val();
    var n = $("#w").val();
    var r = $("#h").val();
    var i = $("#x").val();
    var s = $("#y").val();
    $.ajax({
        type: "POST",
        url: "scripts/resizer.php",
        data: {
            image: t,
            w: n,
            h: r,
            x: i,
            y: s
        }
    }).done(function (e) {
        $("#images1").val(e)
    }).complete(function (e) {
        var t = $(".myform");
        t.reset();
    });
    $("#cropimage").colorbox.close()
});

アップロード セクション:

$(document).ready(function () {

$("#formsubmit").click(function (e) {
        $(".loadgif").css("display", "block");
        e.preventDefault();
        var t = $('<iframe name="postiframe" id="postiframe" style="display:none;"/>');
        $("body").append(t);
        var n = $(".myform");
        n.attr("action", "scripts/uploader.php");
        n.attr("method", "post");
        n.attr("enctype", "multipart/form-data");
        n.attr("encoding", "multipart/form-data");
        n.attr("target", "postiframe");
        n.attr("file", $("#userfile").val());
        n.submit();
        $("#postiframe").load(function () {
            function e(e) {
                $("#x").val(e.x);
                $("#y").val(e.y);
                $("#w").val(e.w);
                $("#h").val(e.h)
            }

            function t() {
                if (parseInt($("#w").val())) return true;
                alert("Please select a crop region then press submit.");
                return false
            }
            iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
            $("#cropimage").html(iframeContents);
            $("#postiframe").remove();
            $.colorbox({
                width: "60%",
                inline: true,
                href: "#cropimage"
            });
            $(document).find("#postiframe").remove();
            $(function () {
                $("#cropbox").Jcrop({
                    aspectRatio: 1,
                    onSelect: e
                })
            });
        })
    });
});

ウェブサイトは製品送信用のフォームを使用しているため、jcrop用に送信するフォームも使用する必要があったため、フォームをアップロード用に変更してからフォームをリセットしますが、できませんそこまで行く。私が言ったように、これは IE と Firefox でうまく動作します。

どんな助けでも大歓迎です。

4

1 に答える 1

1

したがって、解決策は交換することです

$(document).on("submit", "#resize", function (e) {

$(document).on("click", "#button_link", function (e) { 
于 2013-10-17T12:38:48.980 に答える