Javascript 剖面图 步骤1：请选择图像文件 步骤2：请选择一个裁剪区域 文件大小 类型 图像维度 W H

这是因为您的函数fileSelectHandler（）是在另一个函数中定义的。尝试将其移出“$（document）.ready（function（）{…”块

，或者，如果不需要一堆全局函数，请在document ready处理程序中定义

onchange

处理程序，而不是使用内联

onchange

属性。

$(document).ready(function () {
        // 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();
            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(e.w);
            $('#h').val(e.h);
        };

        // clear info by cropping (onRelease event handler)
        function clearInfo() {
            $('.info #w').val('');
            $('.info #h').val('');
        };

        // Create variables (in this scope) to hold the Jcrop API and image size
        var jcrop_api, boundx, boundy;

        function fileSelectHandler() {

            // 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)$/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 > 250 * 1024) {
                $('.error').html('You have selected too big file, please select a one smaller image file').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);

                    // destroy Jcrop if it is existed
                    if (typeof jcrop_api != 'undefined') {
                        jcrop_api.destroy();
                        jcrop_api = null;
                        $('#preview').width(oImage.naturalWidth);
                        $('#preview').height(oImage.naturalHeight);
                    }

                    setTimeout(function () {
                        // initialize Jcrop
                        $('#preview').Jcrop({
                            minSize: [32, 32], // min crop size
                            aspectRatio: 1, // keep aspect ratio 1: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;
                        });
                    }, 3000);

                };
            };

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

<div id="profileUploadModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Upload profilepicture</h4>
                                </div>
                                <div class="modal-body" style="text-align: center;">
                                    <div class="bbody">

                                        <!-- upload form -->
                                        <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" 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" />

                                            <h2>Step1: Please select image file</h2>
                                            <div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div>

                                            <div class="error"></div>

                                            <div class="step2">
                                                <h2>Step2: Please select a crop region</h2>
                                                <img id="preview" />

                                                <div class="info">
                                                    <label>File size</label> <input type="text" id="filesize" name="filesize" />
                                                    <label>Type</label> <input type="text" id="filetype" name="filetype" />
                                                    <label>Image dimension</label> <input type="text" id="filedim" name="filedim" />
                                                    <label>W</label> <input type="text" id="w" name="w" />
                                                    <label>H</label> <input type="text" id="h" name="h" />
                                                </div>

                                                <input type="submit" value="Upload" />
                                            </div>
                                        </form>
                                    </div>
                                 </div>
                                </div>
                                </div>
                            </div>