Question

我目前正在使用Jcrop，我们遇到了Chrome和Safari的问题。

我们可以上传图像并且Jcrop绑定到图像，这样我可以拖动维度并使用inspect元素我可以确认维度已正确更新到字段中。但是，当我单击裁剪图像按钮时，事件不会在chrome或safari上触发。我找了问题但是找不到。因为我有照片的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的表单，因此它会修改表单以便上传，然后重置表单但我可以甚至走得那么远。正如我所说，这在I.E和Firefox中运行良好。

任何帮助都将不胜感激。

Answer 1

所以解决方案是替换

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

通过

$(document).on("click", "#button_link", function (e) {

Jcrop按钮不适用于safari或chrome

1 个答案: