.Net Core使用layui多文件上传

本文实例为大家分享了.NetCore使用layui多文件上传功能的具体代码，供大家参考，具体内容如下这段时间刚刚接触了.NETCore,工作要求，从0开始，给用户开发了一个小型的内部系统。用户提出...

本文实例为大家分享了.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) {
   XAkXM        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 (www.cppcns.comindex, 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(dphpata);
}

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了

上图

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