現在 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 でうまく動作します。
どんな助けでも大歓迎です。