JS在上传之前使用上传的图像

时间:2012-12-28 12:46:46

标签: javascript

我正在尝试使用用户在上传字段中选择的图像,然后才真正上传服务器端。具体来说,我想让用户在实际上传之前用一些jquery插件操作图像(裁剪,闪电等)。

我对JS没有那么多经验,所以到目前为止我最终得到了这段代码:

$(".image_upload_form").submit(function (e) {
    "use strict";
    e.preventDefault();
    var input, files, reader;
    input = $("#id_image");
    files = input[0].files;
    if (files && files[0]) {
        reader = new FileReader();
        reader.onload = function (e) {
            $('#img_view').attr('src', e.target.result);
        };
        reader.readAsDataURL(files[0]);
    }
});

工作正常,图像在提交表单后显示在"#img_view"上。但我需要将"e.target.result"函数中的reader.onload变为变量,因此我可以在以后的代码中使用它。我怎么能这样做?

1 个答案:

答案 0 :(得分:2)

如果您正在考虑IE,这将适用于所有浏览器,几乎在每个主浏览器上

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

        reader.onload = function (e) {
            $('#imagePreview')
                        .attr('src', e.target.result)
                        .width(240)
                        .height(149);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
        $('#imagePreview').attr('src', "../../Images/blqblq.jpg");
    }
}

<img id="imagePreview" class="img-border" src="../../Images/blqblq.jpg" alt="Selected Image"/>