当前位置：首页 > 行业动态 > 正文

Aspnet20如何实现无刷新上传图片并显示缩略图功能？

admin
行业动态
2025-03-07
6

实现步骤1. 前端页面：使用HTML和JavaScript创建一个文件上传控件和一个用于显示缩略图的`

标签。，2. 后端处理：在Asp.Net中创建一个控制器方法，用于处理文件上传并生成缩略图。，3. 生成缩略图：在服务器端使用图像处理库（如System.Drawing）生成缩略图并保存。，4. 返回路径：将生成的缩略图路径返回给前端，并在页面上显示。 示例代码# 前端（HTML + JavaScript），

html，，， document.getElementById('upload').addEventListener('change', function(event) {， const file = event.target.files[0];， const formData = new FormData();， formData.append('file', file); fetch('/api/upload', {， method: 'POST',， body: formData， })， .then(response => response.json())， .then(data => {， document.getElementById('thumbnail').src = data.thumbnailUrl;， });， });，，

` # 后端（Asp.Net Controller），`

csharp，using Microsoft.AspNetCore.Mvc;，using System.Drawing;，using System.IO;，using System.Threading.Tasks;[ApiController]，[Route("api/[controller]")]，public class UploadController : ControllerBase，{， [HttpPost]， public async Task Upload([FromForm] IFormFile file)， {， if (file == null || file.Length == 0)， return BadRequest(); string uploadDir = Path.Combine("uploads", Guid.NewGuid().ToString());， Directory.CreateDirectory(uploadDir);， string filePath = Path.Combine(uploadDir, file.FileName); using (var stream = new FileStream(filePath, FileMode.Create))， {， await file.CopyToAsync(stream);， } string thumbnailPath = GenerateThumbnail(filePath); return Ok(new { thumbnailUrl = "/" + thumbnailPath });， } private string GenerateThumbnail(string filePath)， {， using (var img = Image.FromFile(filePath))， {， int width = 100; // desired thumbnail width， int height = 100; // desired thumbnail height， var thumb = img.GetThumbnailImage(width, height, null, IntPtr.Zero);， string thumbnailPath = Path.ChangeExtension(filePath, "_thumb.jpg");， thumb.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg);， return Path.GetRelativePath(Directory.GetCurrentDirectory(), thumbnailPath);， }， }，}，

“ 通过上述步骤，可以实现无刷新图片上传并即时显示缩略图的功能。用户选择图片后，JavaScript会将文件上传到服务器，服务器生成缩略图并返回其路径，前端再将其显示出来。

Asp.NET 2.0 无刷新图片上传显示缩略图具体实现

在Asp.NET 2.0中，实现无刷新图片上传并显示缩略图的功能需要结合客户端和服务器端的技术，以下是详细的实现步骤：

前端页面设计

我们需要创建一个HTML页面，包含文件上传控件、一个用于显示缩略图的<img>标签以及一个隐藏的iframe来处理文件上传。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无刷新图片上传</title>
    <script type="text/javascript">
        function uploadImage() {
            var fileInput = document.getElementById('fileUpload');
            var iframe = document.getElementById('uploadIframe');
            iframe.onload = function () {
                var imgUrl = iframe.contentWindow.document.body.innerText;
                if (imgUrl) {
                    document.getElementById('thumbnail').src = imgUrl;
                }
            };
            fileInput.click();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="file" id="fileUpload" style="display:none" onchange="uploadFile()" />
        <button type="button" onclick="uploadImage()">选择图片</button>
        <br />
        <img id="thumbnail" src="#" alt="Thumbnail" />
        <iframe id="uploadIframe" name="uploadFrame" style="display:none"></iframe>
    </form>
</body>
</html>