.Net Core怎么使用layui多文件上传

这篇文章主要介绍了.Net Core怎么使用layui多文件上传的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇.Net Core怎么使用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 >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了

上图

关于“.Net Core怎么使用layui多文件上传”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“.Net Core怎么使用layui多文件上传”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。