Question

我正在尝试使用用户在上传字段中选择的图像，然后才真正上传服务器端。具体来说，我想让用户在实际上传之前用一些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变为变量，因此我可以在以后的代码中使用它。我怎么能这样做？

Answer 1

如果您正在考虑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"/>

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

1 个答案: