JCrop不能在ZF2中使用与另一个核心PHP应用程序类似的代码

我已经实现了JCrop在我的项目之前在核心PHP，但当我试图实现相同的代码在ZF2，它不工作，我已经添加了所有的脚本和样式正确，他们都被加载，甚至图像正在加载，但没有选择框可用于裁剪图像。

建议一个更好的方法来实现相同的功能是受欢迎的，但如果有人能告诉我这不起作用的原因，那将是伟大的。

这里是视图脚本photo. php:

<?php
    //adding javascripts specific to this page
    $this->headScript()->appendFile($this->basePath('js/jquery.Jcrop.min.js'));
    $this->headScript()->appendFile($this->basePath('js/jquery.min.js'));
    $this->headScript()->appendFile($this->basePath('js/script.js'));
    //adding stylesheets specific to this page
    $this->headLink()->appendStylesheet($this->basePath('/css/Imageform_style.css'));
    $this->headLink()->appendStylesheet($this->basePath('/css/jquery.Jcrop.min.css'));
?>
    <section>
    <div id="form_div">
    <fieldset>
    <legend><strong>Photograph</strong></legend>
         <!--upload form--> 
        <form id="upload_form" enctype="multipart/form-data" method="post" onsubmit="return checkForm()">
             <!--hidden crop params--> 
            <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" />
            Step1: Please select image file
            <input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" accept="image/*" />
            <div class="error"></div> 
            <div class="step2"> 
                <p style="">Step2: Please select a crop region </p>
                <div><img id="preview"/></div>
                <div id="image_details" class="info" style="display: none">
                    <p><label for="filesize">File size</label> <input type="text" id="filesize" name="filesize" ></p>
                    <p><label for="filetype">Type</label> <input type="text" id="filetype" name="filetype" ></p>
                    <p><label for="filedim">Dimension</label> <input type="text" id="filedim" name="filedim" ></p>
                    <p><label for="w">Width</label> <input type="text" id="w" name="w" ></p>
                    <p><label for="h">Height</label> <input type="text" id="h" name="h" ></p>
                </div>
                <div>
                    <input type="submit" value="Upload" name="upload" />
                </div>
            </div>
        </form>
    </fieldset>
    </div>                            
</section>

script.js包含本页所需的函数。

// convert bytes into friendly format
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};
// check for selected crop region
function checkForm() {
    if (parseInt($('#w').val())) return true;
    //$('.error').html('Please select a crop region and then press Upload').show();
    alert('Please select a crop region and then press Upload');
    return false;
};
// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#x2').val(e.x2);
    $('#y2').val(e.y2);
    $('#w').val(Math.round(e.w));
    $('#h').val(Math.round(e.h));
};
// clear info by cropping (onRelease event handler)
function clearInfo() {
    $('.info #w').val('');
    $('.info #h').val('');
};
function fileSelectHandler() {
//    $('#preview').src('');
    // get selected file
    var oFile = $('#image_file')[0].files[0];
    // hide all errors
    $('.error').hide();
    // check for image type (jpg and png are allowed)
    var rFilter = /^(image'/jpeg|image'/png|image'/gif)$/i;
    if (! rFilter.test(oFile.type)) {
        $('.error').html('Please select a valid image file (jpg and png are allowed)').show();
        return;
    }
    // check for file size
    if (oFile.size > 2048 * 1024) {
        $('.error').html('You have selected too big file, please select a one smaller than 2 MB').show();
        return;
    }
    // preview element
    var oImage = document.getElementById('preview');
    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e) {
        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        oImage.onload = function () { // onload event handler
            // display step 2
            $('.step2').fadeIn(500);
            // display some basic image info
            var sResultFileSize = bytesToSize(oFile.size);
            $('#filesize').val(sResultFileSize);
            $('#filetype').val(oFile.type);
            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
            // Create variables (in this scope) to hold the Jcrop API and image size
            var jcrop_api, boundx, boundy;
            // destroy Jcrop if it is existed
            if (typeof jcrop_api != 'undefined') 
                jcrop_api.destroy();
            // initialize Jcrop
            $('#preview').Jcrop({
                minSize: [32, 32], // min crop size
/// write code for changing the aspect ratio for signature file
                aspectRatio : 0.75, // to keep aspect ratio 1:1, use 1
                bgFade: true, // use fade effect
                bgOpacity: .3, // fade opacity
                onChange: updateInfo,
                onSelect: updateInfo,
                onRelease: clearInfo
            }, 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(oFile);
}

在我以前的项目中，它一直在工作。

编辑:下面是为head

<link href="/Project1v3_zend/public/css/bootstrap.min.css" media="screen" 
rel="stylesheet" type="text/css">
<link href="/Project1v3_zend/public/css/bootstrap-theme.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/Project1v3_zend/public/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="/Project1v3_zend/public/css/Imageform_style.css" media="screen" rel="stylesheet" type="text/css">
<link href="/Project1v3_zend/public/css/jquery.Jcrop.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/Project1v3_zend/public/img/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
        <!-- Scripts -->
        <!--[if lt IE 9]><script type="text/javascript" src="/Project1v3_zend/public/js/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/Project1v3_zend/public/js/respond.min.js"></script><![endif]-->
<script type="text/javascript" src="/Project1v3_zend/public/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/Project1v3_zend/public/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="/Project1v3_zend/public/js/jquery.min.js"></script>
<script type="text/javascript" src="/Project1v3_zend/public/js/script.js"></script>
    </head>