ASP.NET中如何通过JavaScript函数在HTML中显示图片？求助调试

现有代码问题点 #

• 请求方式不匹配：前端用FormData传递文件却使用GET请求，GET无法携带FormData，且后端Action标记为[HttpGet]，与前端请求逻辑冲突。
• 参数与逻辑脱节：前端传递的是上传文件（ImageFile），但后端Action接收的是imgid参数，两者逻辑不对应。
• DOM元素ID错误：JS成功回调中操作#img_cgv，但HTML中图片的ID是DisplayImage，元素选择不匹配。
• Controller文件返回错误：return File(img.IMAGE_TITLE, "image/jpg")中，若IMAGE_TITLE是文件名，需传入文件物理路径；若数据库存储的是二进制图片数据，应传入byte[]类型的图片内容。

修正方案分两种场景实现 #

场景1：上传图片后直接显示

HTML代码

<div class="col-md-4">
    <input type="file" id="SelectImage" accept="image/*" />
    <button onclick="DisplayImage()">显示图片</button>
    <img id="DisplayImage" class="img-responsive thumbnail" width="200" height="200" style="display:none;" />
</div>

JavaScript代码

function DisplayImage() {
    var fileInput = document.getElementById("SelectImage");
    if (fileInput.files.length === 0) {
        alert("请选择图片文件");
        return;
    }
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append("ImageFile", file);

    $.ajax({
        type: "POST",
        url: '/Home/UploadAndDisplayImage',
        data: formData,
        contentType: false,
        processData: false,
        success: function (imageUrl) {
            $("#DisplayImage").show();
            $("#DisplayImage").attr("src", imageUrl);
        },
        error: function (xhr, status, error) {
            console.error("上传失败：" + error);
        }
    });
}

Controller代码

[HttpPost]
public ActionResult UploadAndDisplayImage(HttpPostedFileBase ImageFile)
{
    if (ImageFile != null && ImageFile.ContentLength > 0)
    {
        // 确保UploadImage文件夹存在并设置读写权限
        string uploadPath = Server.MapPath("~/UploadImage/");
        if (!Directory.Exists(uploadPath))
        {
            Directory.CreateDirectory(uploadPath);
        }
        // 生成唯一文件名避免覆盖
        string fileName = Guid.NewGuid().ToString() + Path.GetExtension(ImageFile.FileName);
        string filePath = Path.Combine(uploadPath, fileName);
        ImageFile.SaveAs(filePath);

        // 返回图片相对URL
        return Json("/UploadImage/" + fileName);
    }
    return Json(null);
}

场景2：根据ID从数据库读取二进制图片显示

HTML代码

<div class="col-md-4">
    <input type="text" id="ImageIdInput" placeholder="输入图片ID" />
    <button onclick="DisplayImageById()">根据ID显示图片</button>
    <img id="DisplayImage" class="img-responsive thumbnail" width="200" height="200" style="display:none;" />
</div>

JavaScript代码

function DisplayImageById() {
    var imgId = $("#ImageIdInput").val();
    if (!imgId) {
        alert("请输入图片ID");
        return;
    }
    // 直接将图片src指向后端Action，无需额外AJAX请求
    $("#DisplayImage").show();
    $("#DisplayImage").attr("src", '/Home/GetImageById?imgid=' + imgId);
}

Controller代码

[HttpGet]
public ActionResult GetImageById(int imgid)
{
    using (Models.eCoalDataContext db = new Models.eCoalDataContext())
    {
        var img = db.TBL_M_IMAGEs.SingleOrDefault(x => x.ID == imgid);
        // 假设IMAGE_DATA是数据库中存储二进制图片的字段
        if (img != null && img.IMAGE_DATA != null)
        {
            return File(img.IMAGE_DATA, "image/jpeg");
        }
        // 无图片时返回默认占位图
        return File(Server.MapPath("~/Images/NoImage.jpg"), "image/jpeg");
    }
}

内容的提问来源于stack exchange，提问作者Hanung Risqi