1.添加表单和文件输入组件到页面:
2.在服务器端创建一个控制器并处理文件上传请求:
[ApiController]
[Route("[controller]")]
public class FileUploadController : ControllerBase
{
private readonly string _uploadFolder;
public FileUploadController(IWebHostEnvironment webHostEnvironment)
{
_uploadFolder = Path.Combine(webHostEnvironment.WebRootPath, "uploads");
}
[HttpPost]
public async Task Upload(IFormFile file)
{
if (file.Length != 0)
{
var fileName = DateTime.Now.ToString("yyyyMMddHHmmss_") + file.FileName;
var filePath = Path.Combine(_uploadFolder, fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(stream);
}
return Ok(new { fileName });
}
return BadRequest();
}
}
3.使用 jQuery 和 Ajax 在客户端处理文件上传和显示文件:
$(function () {
$("#uploadButton").click(function (event) {
event.preventDefault();
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: '/FileUpload',
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function (data, textStatus, jqXHR) {
$("#fileList").append(`${data.fileName} `);
}
});
});
});
4.在页面上添加一个列表框来显示上传的文件:
这样就可以将文件上传到服务器并在页面上显示它,同时不需要刷新整个网站。
上一篇:ASP.NETCore6如何使用DateOnly/TimeOnly查询参数?
下一篇:ASP.NETCore6如何在Program.cs中在builder.Build()之前访问IWebHostEnvironment?