JavaScript的FormData对象通过ajax同时上传多张图片到服务器,后端VB完整代码
时间: 2024-09-30 13:10:58 浏览: 27
ajax异步上传图片
JavaScript 的 `FormData` 对象可以用于通过 AJAX 同时上传多张图片到服务器。下面是一个简单的示例,展示了如何创建一个 `FormData` 对象并使用它在后台 VB (Visual Basic) 的 Web API 中进行文件上传:
前端 (JavaScript):
```javascript
// 获取图片元素
var images = document.querySelectorAll('input[type="file"]');
// 创建 FormData 对象
var formData = new FormData();
images.forEach(function(imageInput) {
var file = imageInput.files[0];
if (file) { // 检查是否有选择的文件
formData.append('image[]', file);
}
});
// 发送 AJAX 请求
var xhr = new XMLHttpRequest();
xhr.open("POST", '/api/uploadImages', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText); // 成功响应
}
};
xhr.send(formData);
```
这里假设你有一个名为 `/api/uploadImages` 的 POST 接口。
后端 (VB - ASP.NET Core Web API 示例):
```vb
Imports System.IO
Imports Microsoft.AspNetCore.Mvc
Namespace YourNamespace.Controllers
Public Class ImageController
<HttpPost>
Public Async Function UploadImages(files As IEnumerable<IFormFile>) As async Task<IActionResult]
If files.IsNullOrEmpty() Then
Return BadRequest("No files were selected.")
End If
Try
Dim baseDirectory = Path.Combine(Directory.GetCurrentDirectory(), "Uploads")
Directory.CreateDirectory(baseDirectory) ' Create directory if not exists
For Each file In files
Dim fileName = Path.GetRandomFileName()
Dim filePath = Path.Combine(baseDirectory, fileName)
Using stream = File.Create(filePath)
await file.CopyToAsync(stream)
End Using
' 在这里处理文件,如存储、数据库操作等
Console.WriteLine($"Uploaded: {fileName}")
Next
Return Ok("Files uploaded successfully.")
Catch ex As Exception
Return StatusCode(500), ex.Message
End Try
End Function
End Class
End Namespace
```
在这个例子中,`files` 是 `IFormFile` 类型的集合,代表从前端上传的文件。你需要根据实际需求对文件进行保存和进一步操作。
阅读全文