前端插件-LayUI-----多图片上传

效果预览

参数列表

前台代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>layui---多文件上传demo</title>
    @*导入layui  css样式  注意文件资源路径*@
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div> 
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
            <div class="layui-upload-list">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
            <button type="button" class="layui-btn" id="testListAction">开始上传</button>
        </div> 
    </div>
    @*引入layui  js  注意文件资源路径 改为自己的*@
    <script src="~/Content/layui/layui.js"></script>
    <script>

    //构建初始化器
    layui.use('upload', function()
    {
      var $ = layui.jquery
      ,upload = layui.upload;
      //多文件列表示例
      var demoListView = $('#demoList')
      ,uploadListIns = upload.render({
        elem: '#testList'//节点选择器
        , url: '/DataRead/UpImgs'//文件上传接口
        ,accept: 'file'//选择类型
        ,multiple: true
        ,auto: false
        ,bindAction: '#testListAction'
        ,choose: function(obj){
          var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
          //读取本地文件
          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>等待上传</td>'
              ,'<td>'
                ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
              ,'</td>'
            ,'</tr>'].join(''));

            //单个重传
            tr.find('.demo-reload').on('click', function(){
              obj.upload(index, file);
            });

            //删除
            tr.find('.demo-delete').on('click', function(){
              delete files[index]; //删除对应的文件
              tr.remove();
              uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
            });

            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;">上传成功</span>');
            tds.eq(3).html(''); //清空操作
            return delete this.files[index]; //删除文件队列已经上传成功的文件
          }
          this.error(index, upload);
        }
        ,error: function(index, upload){
          var tr = demoListView.find('tr#upload-'+ index)
          ,tds = tr.children();
          tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
          tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
      });
    });
    </script>
</body>
</html>

后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Aspose.Cells;
using System.Data;
using QXKJMap.Models;
using QXKJMap.Content.Public;
using System.Web.Script.Serialization;
using System.IO;
using System.Collections;
using System.Text.RegularExpressions;
using System.Runtime.Serialization.Json;
using System.Text;
using SharpCompress.Archive;
using SharpCompress.Common;

namespace QXKJMap.Controllers
{
    public class DataReadController : Controller
    {
       

        public ActionResult txt()
        {
            return View();
        }



        /// <summary>
        /// 文件上传
        /// </summary>
        /// <returns>res 返回结果  res=0上传成功  否则失败</returns>
        public string UpImgs()
        {
            string res = "{\"code\":1}";
            try
            {
               
                System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
                if (files.Count == 0)
                {
                    res = "{\"code\":1}";
                }
                for (int i = 0; i < files.AllKeys.Count(); i++)
                {
                    if (files.AllKeys[i] != "img")
                    {
                        if (files[i].FileName.Length > 0)
                        {
                            System.Web.HttpPostedFile postedfile = files[i];

                            string filePath = "";

                            var ext = Path.GetExtension(postedfile.FileName);

                            var fileName = DateTime.Now.Ticks.ToString() + ext;

                            // 组合文件存储的相对路径
                            filePath = "/Content/Upload/TypeLogo/" + fileName;

                            // 将相对路径转换成物理路径
                            var path = Server.MapPath(filePath);

                            postedfile.SaveAs(path);

                            res = "{\"code\":0}";
                        }
                    }

                }
            }
            catch (Exception)
            {
                throw;
            }
            return res;
        }








    }
}

码字不易点个赞关注一下呗谢谢！

未完待续......................

前端插件-LayUI-----多图片上传

猜你喜欢