javascript - jCrop が隠しフィールドを更新しない

Question

jCrop を使用して、誰かがアップロードした画像をトリミングしています。ローカル マシンでは正常に動作していますが、サーバーでは非表示フィールドの座標 (トリミング領域) を更新できません。

私は自分の手を試してみましたが、まだ問題を見つけることができません:(

HTML

<form id="cropIt" action="crop.php" method="post">
            <input type="hidden" id="cropTop" name="x" value="0" />
            <input type="hidden" id="cropLeft" name="y" value="0" />
            <input type="hidden" id="cropWidth" name="w" value="0" />
            <input type="hidden" id="cropHeight" name="h" value="0" />
            <input type="hidden" id="image_name" name="image_name" value="<?php echo $uploadDir . $file; ?>" />
            <p style="paddin-top: 10px; text-align: center;"><input type="submit" name="cropImage" /></p>
        </form>

JavaScript

function updateCoords(c) {
                $('#cropTop').val(c.x);
                $('#cropLeft').val(c.y);
                $('#cropWidth').val(c.w);
                $('#cropHeight').val(c.h);
            }

           function checkCoords() {
               if (parseInt($('#w').val())) {
                    return true;
                }
            //   alert('Please select a crop region then press submit.');
            //   return false;
           };

        $(function($) {
            var newImg = $("#profileImage").clone();
            newImg.css("display", "none").removeAttr("id").appendTo("body");
            var profileImgWidth = newImg.width();
            var profileImgHeight = newImg.height();

            newImg.remove();

            $('#profileImage').Jcrop({
                onSelect: updateCoords,
                onChange: updateCoords,
                boxWidth: 400, 
                boxHeight: 300,
                trueSize: [profileImgWidth, profileImgHeight]
            });
        });