在使用asp.net或jquery保存之前，如何在文件上传控件中预览上传的图像? [英] How to preview uploaded image in file upload control before save using asp.net or jquery?

问题描述

我想在保存之前预览使用asp.net中的文件上传控制上传的图像.

I want to preview image which is uploaded using file upload contorl in asp.net before save.

我使用filereader尝试了代码，但是在IE9中不支持IE9阅读器.

I tried code using filereader but that is not working in IE9 reader is not supported in ie9.

推荐答案

尝试以下示例

HTML

<form id="form1" runat="server">
    <input type='file' id="inputFile" />
    <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
</form>

脚本

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

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

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

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

这将为您提供帮助.

工作演示

这篇关于在使用asp.net或jquery保存之前，如何在文件上传控件中预览上传的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！