如何在 asp.net 中检索图像的二进制数据源

本文关键字：图像 二进制 数据源 检索 asp net | 更新日期: 2023-09-27 18:34:03

我想在 asp.net 网络表单中上传任何图像之前获得图像预览。我正在通过以下代码执行此操作。但是单击"保存"按钮后，我想将图像上传到服务器。在我的代码隐藏中，我得到了 src=" 用于<img>.我该怎么做才能取回二进制数据以保存我的文件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /image.*/;
            if (!file.type.match(imageType)) {
                continue;
            }
            var link = $(fileInput).siblings('.thumb').attr('src');
            alert(link);
            var img = document.getElementById("thumbnil");
            img.file = file;
            var reader = new FileReader();
            reader.onload = (function (aImg) {
                return function (e) {
                    aImg.src = e.target.result;
                };
            })(img);
            reader.readAsDataURL(file);
        }
    }
</script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <input type="file" accept="image/*" onchange="showMyImage(this)" />
            <br />
            <img id="thumbnil" class="thumb" style="width: 20%; margin-top: 10px;" src="" alt="image" runat="server"/>
            <asp:Button runat="server" Text="Save" OnClick="Unnamed_Click"/>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

提前谢谢..

如何在 asp.net 中检索图像的二进制数据源

### 未注明日期的完整答案

###

选项 1：

不要读取 img-tag src 属性，客户端无法在服务器端更新它，也不会"回发"。 使用这样的输入字段

<form...>
    ...
    <input class="image-data" type="hidden" id="imageString" runat="server" />
    ...
</form>

并在 Js 代码中添加此数据网址作为此字段的值。

 ...
 reader.onload = (function (aImg) {
     return function (e) {
     aImg.src = e.target.result;
     //... add this, it's searches for the input-field, to be able to post the String to the Server
     $(".image-data").val(e.target.result);
 };
 ...

更新：

在服务器上，您可以像这样读取数据。

 string imageData = imageString.Value;

选项 2：

您也可以这样做：

更改 asp.net 文件

<!-- add enctype=...  -->
<form id="form1" runat="server" enctype="multipart/form-data">
    ... 
    <!-- add name=... -->
    <input type="file" accept="image/*" onchange="showMyImage(this)" name="uploadImage" />
    ...

在代码隐藏中：

HttpPostedFile imageFile= Request.Files["uploadImage"];
if (imageFile && imageFile.ContentLength > 0)
{
   // ... Use the imageFile variable as you please
}

哪个选项取决于您要对数据执行的操作。

相关文章：