.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多文件上傳”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。