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

Posted 2020-12-18 一根火柴Blog

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; }
    }
}

2. 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");
}

3. 视图

<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>
}