在图像filepreview上设置宽度后，imgareaselect filepreview无法正常工作

Question

这是上传和预览图片的HTML代码

我一直在尝试在缩放图像上制作imgareaselect插件，动态缩放图像以使其适合其容器。

<p><input name="image" id="fileInput" type="file" required /></p>
  <input type="hidden" id="x" name="x" />
  <input type="hidden" id="y" name="y" />
  <input type="hidden" id="w" name="w" />
  <input type="hidden" id="h" name="h" /><p id="preview"><img id="filePreview" style="display:none;"/></p>

使用imgareaselect插件的Jquery

<script>
        //set image coordinates
        function updateCoords(im,obj){
            $('#x').val(obj.x1);
            $('#y').val(obj.y1);
            $('#w').val(obj.width);
            $('#h').val(obj.height);
        }

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

        $(document).ready(function(){
            //prepare instant image preview
            var p = $("#filePreview");
            $("#fileInput").change(function(){
                //fadeOut or hide preview
                p.fadeOut();

                //prepare HTML5 FileReader
                var oFReader = new FileReader();
                oFReader.readAsDataURL(document.getElementById("fileInput").files[0]);

                oFReader.onload = function (oFREvent) {
                    p.attr('src', oFREvent.target.result).fadeIn();
                };
            });

            //implement imgAreaSelect plugin
            $('img#filePreview').imgAreaSelect({
                // set crop ratio (optional)
                aspectRatio: '57:71',
                onSelectEnd: updateCoords
            });

            $('#preview').css({
                width: Math.round(scaleX * $("#filePreview").width())+"px",
                height: Math.round(scaleY * $("#filePreview").height())+"px",
                marginLeft: -Math.round(scaleX * selection.x1),
                marginTop: -Math.round(scaleY * selection.y1)
            });
        });
    </script>