JCrop will not work in my JavaScript code

Ok so the JCrop bit of code below doesn't work.

The visitor uses the file input element to select an image on their computer which is then shown in an img tag before it is uploaded. The visitor then uses JCrop to select what part of the image they want to upload. Once uploaded I will use a servlet to crop and save the image in a database.

Any ideas anyone? Thanks

JavaScript in header:

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="tapmodo-Jcrop-5e58bc9/js/jquery.Jcrop.js"></script>
    <link href="tapmodo-Jcrop-5e58bc9/css/jquery.Jcrop.css" rel="stylesheet" type="text/css"/>
    <script>
        <!--
        $(document).ready(function () {
            $("#previewInput").change(function(e) {
                var file = e.originalEvent.srcElement.files[0];
                var img = document.createElement("img");
                var reader = new FileReader();
                reader.onloadend = function() {
                    img.src = reader.result;
                    img.id = 'previewimg';
                reader.readAsDataURL(file);
                $("#preview").html('Please crop your image below:<br />');
                $("#preview").append(img);
                setTimeout(1250);
                $('#previewimg').Jcrop({
                    aspectRatio: 1,
                    onChange: setCoords,
                    onSelect: setCoords
                });
            });
        });

        function setCoords(c)
        {
            $('input[name=x1]').val(c.x);
            $('input[name=y1]').val(c.y);
            $('input[name=x2]').val(c.x2);
            $('input[name=y2]').val(c.y2);
        };
        -->
    </script>

HTML in body:

            <h1>Thanks for registering!</h1>
            Upload a display picture:<br />
            <div id="upload">
                <form action="crop" method="post" enctype="multipart/form-data" >
                    <input id="previewInput" type="file" name="image"/><br />
                    <input type="hidden" name="x1" value=""/>
                    <input type="hidden" name="y1" value=""/>
                    <input type="hidden" name="x2" value=""/>
                    <input type="hidden" name="y2" value=""/>
                    <input type="submit" name="submit" value=开发者_如何学Python"Upload and crop image"/><br />
                </form>
                <div id="preview"></div>
            </div>
            <a href="">Or click here to view your account and keep the default image</a><br />

I am the author of Jcrop. I think the problem may be that your element is not inserted into the DOM yet. It usually needs to be there for Jcrop to figure out the size. Once you do so, in your code above, you might also try using $(img) instead of selecting by the ID. Sometimes when you insert an element it takes a tiny amount of time for the DOM to respond, so trying to select it immediately after sometimes causes problems. Again, I'm not completely sure if these are the problems you're having, but that's my initial reaction.