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

标签：top   control   mit   copyto   model   list   tar   cccccc   func   

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视图中添加视图代码：

    
单文件上传
    

        提交
    

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

2. 多文件上传

在HomeController中添加Action 方法：

public IActionResult MultipleFile(IEnumerable 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");
}

视图代码:

    
多文件上传
    

        提交
    

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. 视图

    
模型中的文件上传
    

        提交
    

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

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

    
单文件上传(JS)
    

@section Scripts{
    
}

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

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

    
多文件上传(JS)
    

@section Scripts{
    
}

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

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

    
模型中的文件上传(JS)
    

@section Scripts{
    
}

7. 图片预览

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

@{
    ViewData["Title"] = "Home Page";
}
@section Style{
    
}


    
单文件上传
    

        提交
    




    
多文件上传
    

        提交
    



    
模型中的文件上传
    

        提交
    



    
单文件上传(JS)
    



    
多文件上传(JS)
    



    
模型中的文件上传(JS)
    



    
图片上传预览
    

        图片预览
    


@section Scripts{
    
}

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

标签：top   control   mit   copyto   model   list   tar   cccccc   func   

原文地址：https://www.cnblogs.com/AlexanderZhao/p/13375066.html