• notice
  • Congratulations on the launch of the Sought Tech site

Net Core how to use layui multiple file upload

This article mainly introduces the relevant knowledge of how to use layui multi-file upload in .Net Core. The content is detailed and easy to understand, the operation is simple and fast, and it has certain reference value. I believe that everyone will read this article on how to use layui multi-file upload. There are gains, let's take a look at it together.

1. Front-end page

<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 section

<script>
   layui.use('upload', function () {
        var upload = layui.upload;
        var demoListView = $('#demoList')
             , uploadListIns = upload.render({
                elem: '#testList'
                , url: 'Your file upload interface'
                , accept: 'file'
                , multiple: true
                , size: 30000
                , auto: false
                , bindAction: '#testListAction'
                 , choose: function (obj) {
                      var files = this.file = obj.pushFile(); //Append each selected file to the file queue
                      console.log(uploadListIns);
                      // read local file
                      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">reload</button>'
                                    , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">Delete</button>'
                                    , '</td>'
                                    , '</tr>'].join(''));
                                
                                //delete
                                tr.find('.demo-delete').on('click', function () {
                                    delete files[index]; //delete the corresponding file
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //Clear the input file value, so that the file with the same name cannot be selected after deletion
                                    
                                    //console.log(files);
                                });
                                demoListView.append(tr);
                            });
                        }
                        , done: function (res, index, upload) {
                            if (res.code == 0) //Upload successful
                                var tr = demoListView.find('tr#upload-' + index)
                                    , tds = tr.children();
                            tds.eq(2).html('<span>Success</span>');
                            tds.eq(3).html(''); //clear operation
                            return delete this.files[index]; //Delete files that have been uploaded successfully from the file queue
                        }
                        , error: function (index, upload) {
                   }
              });
            })
</script>

If you come here, it is actually copied from the official website hahaha, the next thing is the key

2. Backend part

Here is the controller part

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, "You want to upload to the folder");
                    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);//Convert to Json format!
     return Json(data);
}

The model part is mainly to call back json data to 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; }
     }
}

At this point, the file upload is basically done.

Above

How .Net Core uses layui to upload multiple files

The content of the article "How to use layui multi-file upload in .Net Core" is introduced here, thank you for reading! I believe that everyone has a certain understanding of "how to use layui multi-file upload in .Net Core". 


Tags

Technical otaku

Sought technology together

Related Topic

0 Comments

Leave a Reply

+