C# MVC(File)控件多张图片上传加预览
时间: 2023-08-02 10:23:49 浏览: 63
您好!针对您的问题,我可以给您提供以下思路:
1. 在前端页面中添加一个input type="file"的控件,用于选择图片文件。
2. 使用JavaScript监听input控件的change事件,获取用户选中的图片文件。
3. 将选中的图片文件通过FormData对象上传到后台,后台接收到文件后,将文件保存到服务器的指定目录下。
4. 在前端页面中使用JavaScript动态创建img元素,将上传的图片文件以预览的形式展示出来。
以下是一个简单的示例代码,供您参考:
前端页面代码:
```
<input type="file" id="fileInput" multiple>
<div id="preview"></div>
<script>
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function() {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
var img = document.createElement("img");
img.src = this.result;
document.getElementById("preview").appendChild(img);
}
}
});
</script>
```
后台代码(C# MVC):
```
[HttpPost]
public ActionResult UploadFiles()
{
var files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
var file = files[i];
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/Uploads"), fileName);
file.SaveAs(path);
}
return Content("上传成功!");
}
```
上述代码中,前端页面中的input控件id为fileInput,预览图片的容器id为preview;后台代码中,上传文件的保存路径为~/Uploads目录下。
希望这些信息能对您有所帮助!