php - Jsがボタンを殺してライトボックスをロードしますか?

Question

現在、画像をアップロードするためのスクリプトを持つライトボックスを呼び出すボタンがあります。ただし、スクリプトを編集して画像をトリミングしましたが、付属の Jquery プラグインがライト ボックスをロードするボタンを無効にします。別のphpファイルとしてライトボックスに呼び出してみました。トリミングは、ヘッダーではなく、その上にある jquery でのみ機能します。以下を参照してください。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/script.js"></script>
<div id="profile_pic"> <img src="images/pro.jpg" id="thumb"/> </div>
<br/>
<form enctype="multipart/form-data" method="post" action="upload.php" onSubmit="return validateForm();">
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
    <input type="hidden" id="x1" name="x1" />
    <input type="hidden" id="y1" name="y1" />
    <input type="hidden" id="x2" name="x2" />
    <input type="hidden" id="y2" name="y2" /> 
    <h1>Change Profile Picture</h1>
    <div class="file_field"> <strong>Select An Image:
        </strong> <input type="file" style="width:220px;" id="image_file" name="image_file"> <input type="submit" value="Upload"/> 
    </div>
    <br/>
    <div class="error" style="display: none;">
    </div>
    <br/> 
    <div id="image_div" style="display:none;"> <img src="" id="load_img"/> <br/>
    </div>
</form>

上記のすべてがここに収まる必要があります。

<div id="inline1" style="width:auto;display: none;">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.Jcrop.min.js"></script>
    <script src="js/script.js"></script>
    <div id="profile_pic">
        <img src="images/pro.jpg" id="thumb"/>
    </div>
    <br/>
    <form enctype="multipart/form-data" method="post" action="upload.php" onSubmit="return validateForm();" 
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
    <input type="hidden" id="x1" name="x1" />
    <input type="hidden" id="y1" name="y1" />
    <input type="hidden" id="x2" name="x2" />
    <input type="hidden" id="y2" name="y2" />
    <h1>Change Profile Picture</h1>
    <div class="file_field">
        <strong>Select An Image: </strong>
        <input type="file" style="width:220px;" id="image_file" name="image_file">
        <input type="submit" value="Upload"/>
    </div>
    <br/>
    <div class="error" style="display: none;">
    </div>
    <br/>
    <div id="image_div" style="display:none;">
        <img src="" id="load_img"/>
        <br/>
    </div>
    </form>
</div>

これはあなたが見る必要があると思うJSです：

//Make global variables for selected image for further usage
var selectImgWidth,selectImgHeight,jcrop_api, boundx, boundy,isError=false;
$(document).ready(function(){
    $("#image_file").change(function(){
        var previewId = document.getElementById('load_img');
        var thumbId = document.getElementById('thumb');
        previewId.src = '';
        $('#image_div').hide();
        var flag = 0;

        // Get selected file parameters
        var selectedImg = $('#image_file')[0].files[0];

        //Check the select file is JPG,PNG or GIF image
        var regex = /^(image\/jpeg|image\/png)$/i;
        if (! regex.test(selectedImg.type)) {
            $('.error').html('Please select a valid image file (jpg and png are allowed)').fadeIn(500);
            flag++;
            isError = true;
        }

        // Check the size of selected image if it is greater than 250 kb or not
        else if (selectedImg.size > 250 * 1024) {
            $('.error').html('The file you selected is too big. Max file size limit is 250 KB').fadeIn(500);
            flag++;
            isError = true;
        }

        if(flag==0){
        isError=false;
        $('.error').hide(); //if file is correct then hide the error message


        // Preview the selected image with object of HTML5 FileReader class
        // Make the HTML5 FileReader Object
        var oReader = new FileReader();
            oReader.onload = function(e) {

            // e.target.result is the DataURL (temporary source of the image)
                thumbId.src = previewId.src=e.target.result;

                // FileReader onload event handler
                previewId.onload = function () {

                // display the image with fading effect
                $('#image_div').fadeIn(500);
                selectImgWidth = previewId.naturalWidth; //set the global image width
                selectImgHeight = previewId.naturalHeight;//set the global image height

                // Create variables (in this scope) to hold the Jcrop API and image size

                // destroy Jcrop if it is already existed
                if (typeof jcrop_api != 'undefined') 
                    jcrop_api.destroy();

                // initialize Jcrop Plugin on the selected image
                $('#load_img').Jcrop({
                    minSize: [32, 32], // min crop size
                   // aspectRatio : 1, // keep aspect ratio 1:1
                    bgFade: true, // use fade effect
                    bgOpacity: .3, // fade opacity
                    onChange: showThumbnail,
                    onSelect: showThumbnail
                }, function(){

                    // use the Jcrop API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];

                    // Store the Jcrop API in the jcrop_api variable
                    jcrop_api = this;
                });
            };
        };

        // read selected file as DataURL
        oReader.readAsDataURL(selectedImg);
    }
    })
})

function showThumbnail(e)
{
    var rx = 155 / e.w; //155 is the width of outer div of your profile pic
    var ry = 190 / e.h; //190 is the height of outer div of your profile pic
    $('#w').val(e.w);
    $('#h').val(e.h);
    $('#w1').val(e.w);
    $('#h1').val(e.h);
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#x2').val(e.x2);
    $('#y2').val(e.y2);
    $('#thumb').css({
        width: Math.round(rx * selectImgWidth) + 'px',
        height: Math.round(ry * selectImgHeight) + 'px',
        marginLeft: '-' + Math.round(rx * e.x) + 'px',
        marginTop: '-' + Math.round(ry * e.y) + 'px'
    });
}

function validateForm(){
    if ($('#image_file').val()=='') {
        $('.error').html('Please select an image').fadeIn(500);
        return false;
    }else if(isError){
        return false;
    }else {
        return true;
    }
}