可以通过以下步骤实现:
以下是一个示例代码,演示了如何在ASP.NET核心中上传图像并更改图像元素的src属性:
前端页面代码(HTML):
<form method="post" enctype="multipart/form-data">
<input type="file" name="imageFile" id="imageFile" accept="image/*">
<input type="submit" value="Upload">
</form>
<img id="uploadedImage" src="" alt="Uploaded Image">
<script>
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault();
var fileInput = document.getElementById('imageFile');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('imageFile', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
var uploadedImage = document.getElementById('uploadedImage');
uploadedImage.src = data.imageUrl;
})
.catch(error => console.error(error));
});
</script>
后端代码(C#):
[HttpPost("/upload")]
public IActionResult Upload(IFormFile imageFile)
{
if (imageFile != null && imageFile.Length > 0)
{
var fileName = Guid.NewGuid().ToString() + Path.GetExtension(imageFile.FileName);
var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads", fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
imageFile.CopyTo(stream);
}
var imageUrl = "/uploads/" + fileName;
return Json(new { imageUrl });
}
return BadRequest();
}
上述代码中,前端页面中的文件上传控件使用了HTML的<input type="file">元素。在提交表单时,通过JavaScript代码使用fetch API将图像文件发送到后端的/upload路由。
后端的/upload路由使用了ASP.NET核心的[HttpPost]特性来处理POST请求。在处理方法中,首先检查上传的图像文件是否存在并且大小大于0。然后,生成一个唯一的文件名,并将图像文件保存到服务器的指定位置。最后,返回一个包含图像URL的JSON响应。
在前端的JavaScript代码中,通过监听表单的submit事件,获取上传的图像文件,并使用FormData对象将其包装。然后,使用fetch API将FormData对象发送到后端。在收到响应后,将返回的图像URL赋给图像元素的src属性,从而显示上传的图像。
请注意,上述示例代码仅演示了如何在ASP.NET核心中上传图像并更改图像元素的src属性。实际应用中,可能还需要进行一些额外的处理,例如验证上传的文件类型、大小限制、图像处理等。
领取专属 10元无门槛券
手把手带您无忧上云