.net core实现单文件上传、多文件上传、js提交实现文件上传、图片预览

心已赠人 2023-02-08 15:53 43阅读 0赞

## 1. 单文件上传 ##

在Visual Studio 2019中新建一个MVC项目。  
在HomeController中添加SingleFile方法

public IActionResult SingleFile(IFormFile file)
    {
        var dir = env.WebRootPath;
        using (var fileStream = new FileStream(Path.Combine(dir,"file.png"),FileMode.Create,FileAccess.Write))
        {
            file.CopyTo(fileStream);
        }
        return RedirectToAction("Index");
    }

在HomeController对应的Index.cshtml视图中添加视图代码：

<div>
        <h4>单文件上传</h4>
        <form asp-controller="Home" asp-action="SingleFile" enctype="multipart/form-data" method="post">
            <input type="file" name="file" />
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>

control+F5运行项目，可以测试单文件上传功能

## 2. 多文件上传 ##

在HomeController中添加Action 方法：

public IActionResult MultipleFile(IEnumerable<IFormFile> files)
    {
        var dir = env.WebRootPath;
        foreach (var file in files)
        {
            using (var fileStream = new FileStream(Path.Combine(dir,file.FileName),FileMode.Create,FileAccess.Write))
            {
                file.CopyTo(fileStream);
            }
        }
        return RedirectToAction("Index");
    }

视图代码:

<div>
        <h4>多文件上传</h4>
        <form asp-controller="Home" asp-action="MultipleFile" enctype="multipart/form-data" method="post">
            <input type="file" name="files" multiple />
            <button type="submit">提交</button>
        </form>
    </div>

## 3. 模型中的文件上传 ##

1.  新建模型类文件:SomeForm

using Microsoft.AspNetCore.Http;
    
    namespace FileUploadDemo.Models
    {
        public class SomeForm
        {
            public string Name { get; set; }
            public IFormFile File { get; set; }
        }
    }

1.  Action方法：

public IActionResult FileInModel(SomeForm someForm)
    {
        var dir = env.WebRootPath;
        using (var fileStream = new FileStream(Path.Combine(dir, someForm.Name), FileMode.Create, FileAccess.Write))
        {
            someForm.File.CopyTo(fileStream);
        }
        return RedirectToAction("Index");
    }

1.  视图

<div>
        <h4>模型中的文件上传</h4>
        <form asp-controller="Home" asp-action="FileInModel" enctype="multipart/form-data" method="post">
            <input type="text" name="someForm.Name" />
            <input type="file" name="someForm.File" />
            <button type="submit">提交</button>
        </form>
    </div>

## 4. 单文件上传(JS提交) ##

使用的js库axios。  
Action方法与前面单文件上传一样  
视图中的代码:

<div>
        <h4>单文件上传(JS)</h4>
        <input type="file" onchange="UploadFile(event)" />
    </div>
    @section Scripts{
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
        <script> var UploadFile = function (e) { console.log(e); var file = e.target.files[0] var formData = new FormData(); formData.append("file", file); axios.post("/Home/SingleFile", formData); } </script>
    }

## 5. 多文件上传(JS提交) ##

Action方法与前面多文件上传一样  
视图中的代码:

<div>
        <h4>多文件上传(JS)</h4>
        <input type="file" multiple onchange="UploadFiles(event)" />
    </div>
    @section Scripts{
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
        <script> //多文件上传 var UploadFiles = function (e) { console.log(e); var files = e.target.files; var formData = new FormData(); for (var i = 0; i < files.length; i++) { formData.append("files", files[i]); } axios.post("/Home/MultipleFile", formData); console.log("文件上传成功"); } </script>
    }

## 6. 模型中的文件上传(JS实现) ##

Action方法与前面模型中的文件上传一样  
视图中的代码:

<div>
        <h4>模型中的文件上传(JS)</h4>
        <input type="text" id="fileName" />
        <input type="file" onchange="UploadFileToModel(event)" />
    </div>
    @section Scripts{
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
        <script> //模型中的文件上传 var UploadFileToModel = function (e) { var fileName = document.getElementById("fileName").value; var file = e.target.files[0]; var formData = new FormData(); formData.append("someForm.Name", fileName); formData.append("someForm.File", file); axios.post("/Home/FileInModel", formData); } </script>
    }

## 7. 图片预览 ##

只是在视图文件中实现，未做上传  
视图代码:

@{
        ViewData["Title"] = "Home Page";
    }
    @section Style{
        <style> * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } .image-preview { width: 300px; min-height: 100px; border: 2px solid #dddddd; margin-top: 15px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #cccccc; } .image-preview__image { display: none; width: 100%; } </style>
    }
    
    <div>
        <h4>单文件上传</h4>
        <form asp-controller="Home" asp-action="SingleFile" enctype="multipart/form-data" method="post">
            <input type="file" name="file" />
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    
    
    <div>
        <h4>多文件上传</h4>
        <form asp-controller="Home" asp-action="MultipleFile" enctype="multipart/form-data" method="post">
            <input type="file" name="files" multiple />
            <button type="submit">提交</button>
        </form>
    </div>
    
    <div>
        <h4>模型中的文件上传</h4>
        <form asp-controller="Home" asp-action="FileInModel" enctype="multipart/form-data" method="post">
            <input type="text" name="someForm.Name" />
            <input type="file" name="someForm.File" />
            <button type="submit">提交</button>
        </form>
    </div>
    
    <div>
        <h4>单文件上传(JS)</h4>
        <input type="file" onchange="UploadFile(event)" />
    </div>
    
    <div>
        <h4>多文件上传(JS)</h4>
        <input type="file" multiple onchange="UploadFiles(event)" />
    </div>
    
    <div>
        <h4>模型中的文件上传(JS)</h4>
        <input type="text" id="fileName" />
        <input type="file" onchange="UploadFileToModel(event)" />
    </div>
    
    <div>
        <h4>图片上传预览</h4>
        <input type="file" name="inpFile" id="inpFile">
        <div id="imagePreview" class="image-preview">
            <img src="" alt="image preview" class="image-preview__image">
            <span class="image-preview__default-text">图片预览</span>
        </div>
    </div>
    
    @section Scripts{
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
        <script> //单文件上传 var UploadFile = function (e) { console.log(e); var file = e.target.files[0] var formData = new FormData(); formData.append("file", file); axios.post("/Home/SingleFile", formData); } //多文件上传 var UploadFiles = function (e) { console.log(e); var files = e.target.files; var formData = new FormData(); for (var i = 0; i < files.length; i++) { formData.append("files", files[i]); } axios.post("/Home/MultipleFile", formData); console.log("文件上传成功"); } //模型中的文件上传 var UploadFileToModel = function (e) { var fileName = document.getElementById("fileName").value; var file = e.target.files[0]; var formData = new FormData(); formData.append("someForm.Name", fileName); formData.append("someForm.File", file); axios.post("/Home/FileInModel", formData); } //图片预览 const inpFile = document.getElementById("inpFile"); const previewContainer = document.getElementById("imagePreview"); const previewImage = previewContainer.querySelector('.image-preview__image'); const previewDefaultText = previewContainer.querySelector('.image-preview__default-text'); inpFile.addEventListener("change", function () { const file = this.files[0]; if (file) { const reader = new FileReader(); previewDefaultText.style.display = 'none'; previewImage.style.display = 'block'; reader.addEventListener('load', function () { console.log(this); previewImage.setAttribute('src', this.result); }); reader.readAsDataURL(file); } else { previewDefaultText.style.display = null; previewImage.style.display = null; previewImage.setAttribute('src', ""); } }); </script>
    }