.Net Core使用layui多文件上传

本文实例为大家分享了.Net Core使用layui多文件上传功能的具体代码，供大家参考，具体内容如下

这段时间刚刚接触了.NET Core,工作要求，从0开始，给用户开发了一个小型的内部系统。用户提出需求，要求能实现多文件上传，上传不同位置的文件，可以删除。

找来找去还是layui的文件上传符合审美，不多废话上代码

1.前端页面

<div class="layui-upload">
     <button type="button" class="layui-btn layui-btn-normal" id="testList">Search</button>
     <div class="layui-upload-list">
           <table class="layui-table">
             <thead>
               <tr>
               <th>File Name</th>
               <th>Size</th>
               <th>Status</th>
               <th>Action</th>
               </tr>
             </thead>
            <tbody id="demoList"></tbody>
         </table>
      </div>
  <button type="button" class="layui-btn" id="testListAction" onclick="noFile()">Upload</button>
</div>

script部分

<script>
   layui.use('upload', function () {
        var upload = layui.upload;
        var demoListView = $('#demoList')
             , uploadListIns = upload.render({
                elem: '#testList'
                , url: '你的文件上传接口'
                , accept: 'file'
                , multiple: true
                , size: 30000
                , auto: false
                , bindAction: '#testListAction'
                 , choose: function (obj) {
                      var files = this.file = obj.pushFile(); //将每次选择的文件追加到文件队列
                      console.log(uploadListIns);
                      //读取本地文件
                      obj.preview(function (index, file, result) {
                      var tr = $(['<tr id="upload-' + index + '">'
                                    , '<td>' + file.name + '</td>'
                                    , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                                    , '<td>Wait to upload</td>'
                                    , '<td>'
                                    , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                    , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">Delete</button>'
                                    , '</td>'
                                    , '</tr>'].join(''));
                                
                                //删除
                                tr.find('.demo-delete').on('click', function () {
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                    
                                    //console.log(files);
                                });
                                demoListView.append(tr);
                            });
                        }
                        , done: function (res, index, upload) {
                            if (res.code == 0) //上传成功
                                var tr = demoListView.find('tr#upload-' + index)
                                    , tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">Success</span>');
                            tds.eq(3).html(''); //清空操作
                            return delete this.files[index]; //删除文件队列已经上传成功的文件
                        } 
                        , error: function (index, upload) {
                   }
              });
            })
</script>

到这里的话其实就是从官网copy下来的哈哈哈，接下来的就是重点啦

2.后端部分

这里是controller部分

public async Task<IActionResult> UploadFiles(List<IFormFile> file)
        {
            EditorDataResult editorResult = new EditorDataResult();
            foreach (var formFile in file)
            {
                if (formFile.Length > 0)
                {
                    FileInfo fi = new FileInfo(formFile.FileName);
                    string ext = fi.Extension;
                    var orgFileName = fi.Name;
                    var newFileName = Guid.NewGuid() + ext;
                    var uploads = Path.Combine(_hostingEnvironment.WebRootPath, "你想要上传到文件夹");
                    var filePath = Path.Combine(uploads, newFileName);
                    using (var stream = new FileStream(filePath, FileMode.Create))
                    {
                        await formFile.CopyToAsync(stream);
                    }
                    editorResult.code = 0;
                    }
                else
                {

                    editorResult.code = 1;
                }
            }
         JavaScriptSerializer jss = new JavaScriptSerializer();
     string data = jss.Serialize(editorResult);//转换为Json格式!
     return Json(data);
}

model部分 主要就是回调json数据给layui

namespace LayuiMvc.Common.Result
{
    public class EditorDataResult
    {
        public int code { get; set; }
        public string msg { get; set; }
        public Dictionary<string, string> data { get; set; }
    }
}

到这边基本上文件上传已经done了

上图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。