Javascript HTML5文件api&；jcrop问题

我使用html5和文件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>

<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.');
    }
});

javascript:

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

<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.');
    }
});

功能手柄文件选择（evt）{
var files=evt.target.files；
var file=files[0]；
if（文件[0]。键入.match（'image.*'））{
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'result'）.innerHTML=“”；
document.getElementById（'result'）.insertBefore（span，null）；
};
})（文件）；
//作为数据URL读入图像文件。
reader.readAsDataURL（文件）；
//$（'#cropbox'）.Jcrop（选项，函数（）{Jcrop_api=this；}）；
}否则{
警报（“您输入的文件不是图片”）；
$（“#配置文件图片表格”）。每个（函数（）{
这是reset（）；
});
}
}
$（文档）.ready（函数（）{
//检查各种文件API支持。
if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
document.getElementById（'file'）.addEventListener（'change'，handleFileSelect，false）；
}否则{
警报（'此浏览器不完全支持文件API'）；
}
});

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

---

我现在想要的是“Jcrop”图片，但是当我尝试$（“#cropbox）.Jcrop（）；什么都没有发生，为什么？

您在错误的位置调用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);
}

if（文件[0]。键入.match（'image.*'））{
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'result'）.innerHTML=“”；
document.getElementById（'result'）.insertBefore（span，null）；
$（“#cropbox”）.Jcrop（）；//谢谢，这是我所需要的，你会在19小时内得到我的赏金。我没有收到我的赏金：（我的坏东西，我没有时间。给你：）