Html 5 文件 api & jcrop 问题

Question

我使用 html5 和 File API 在本地渲染图片。

html:

<form action="/Picture/UpdateProfilePicture" id="profile_pic_form" method="post">
       <input type="file" id="file"><br>
</form>
<div>
       <output id="result"></output>
</div>

javascript:

<script type="text/javascript">
function handleFileSelect(evt) {
    var files = evt.target.files;
    var file = files[0];
    if (files[0].type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img id="cropbox" class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('result').innerHTML = "";
                document.getElementById('result').insertBefore(span, null);
            };
        })(file);
        // Read in the image file as a data URL.
        reader.readAsDataURL(file);
        //$('#cropbox').Jcrop(options, function () { jcrop_api = this; });
    } else {
        alert("the file you entered is not a picture");
        $("#profile_pic_form").each(function() {
            this.reset();
        });
    }
}

$(document).ready(function() {
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        document.getElementById('file').addEventListener('change', handleFileSelect, false);
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }
});

js获取文件并在输出标签内生成span&img标签。

我现在想要的是“Jcrop”图片但是当我尝试 $("#cropbox).Jcrop(); 没有任何反应，为什么？

Answer 1

您在错误的地方调用 Jcrop。在创建图像之前调用它。

if (files[0].type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img id="cropbox" class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('result').innerHTML = "";
                document.getElementById('result').insertBefore(span, null);
                $('#cropbox').Jcrop(); // <---- Should be here.
            };
        })(file);
}