Question

我想在用户通过点击浏览按钮选择图片后获得Jcrop插件工作，我们可以使用FileReader()加载图片预览，我可以显示预览但是当我在浏览按钮的Jcrop事件上初始化change时，它不起作用。以下是代码。

表格

<form id="form1" runat="server">
    <input type='file' id="imageInput" />
    <img id="blah" src="#" alt="your image" />
</form>

的Javascript

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imageInput").change(function(){
    readURL(this);
    $("#blah").Jcrop();
});

在我添加$("#blah").Jcrop();时，在上面的Javascript代码中，预览不起作用，我得到一条黑线。我创建了一个小提琴来演示相同的http://jsfiddle.net/LvsYc/8230/

请帮忙！

Answer 1

尝试在Jcrop回调中调用FileReader.onload这样的回调（我在你的小提琴里用FF试了一下，它运行正常）

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
            $("#blah").Jcrop();
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imageInput").change(function(){
    readURL(this);
});

如何在上传之前获取图像的裁剪坐标？

1 个答案: