layui的上传文件（upload）(layui.upload)(java 和 c#后台都有)

最新推荐文章于 2025-05-28 16:39:52 发布

原创最新推荐文章于 2025-05-28 16:39:52 发布 · 9.7k 阅读

14 ·

CC 4.0 BY-SA版权

c# 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的文件上传功能示例，包括前端HTML页面代码与后端处理逻辑（支持C#与Java）。该示例展示了如何配置文件上传组件、处理文件上传过程中的各种事件，并提供了两种不同后端语言的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://www.layui.com/demo/upload.html

这个是官网，那里有示例以及代码
比如其中一个

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="/Scripts/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/layer/layer.js" type="text/javascript"></script>
    <script src="/Scripts/layui/layui.all.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/Scripts/layui/css/layui.css" />
    <!--<script type="text/javascript">
        $(document).ready(function () {
            layui.upload.render({
                elem: '#test10'
                        , url: '/upload/'
                        , done: function (res) {
                            console.log(res)
                        }
            });
        })
    </script>-->
    <script type="text/javascript">
        $(document).ready(function () {

            layui.use('upload', function(){
                var $ = layui.jquery
                , upload = layui.upload;
                var demoListView = $('#demoList')
                  , uploadListIns = upload.render({
                      elem: '#testList'
                      //, url: window.location.host+'/api/uploadfile'
                      , url: 'http://localhost:40628/api/uploadfile'
                    , 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-xs demo-reload layui-hide">重传</button>'
                                , '<button class="layui-btn layui-btn-xs 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) {
                        //alert(res);
                        //console.log(res);
         
                        if (res.res == "success") { //上传成功
                            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>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>高级应用：制作一个多文件列表</legend>
    </fieldset>

    <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 class="layui-upload-drag" id="test10">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
    </div>-->
</body>
</html>

然后就是controller端要返回json对象数据
，然后由js端的
在这里插入图片描述
进行处理
然后controller代码：（c#）

[HttpPost]
        public IHttpActionResult uploadfile()
        {
            if (HttpContext.Current.Request.Files.Count > 0)
            {
                try
                {
                    //得到客户端上传的文件
                    HttpPostedFile file = HttpContext.Current.Request.Files[0];
                    //服务器端要保存的路径
                    string filePath = HttpContext.Current.Server.MapPath("~/filedata/") + file.FileName;// +".txt";
                    file.SaveAs(filePath);
                    //返回结果
                   
                   
                    return Json(new {res="success"});
                }
                catch (Exception ex)
                {
                    return Json(new { res = ex.Message });
                }
            }
            else
            {
                return Json(new { res = "error" }); ;
                //Response.Write("Error1");
            }
        }

controller( java )

	@RequestMapping(value = "/uploadfile",method = RequestMethod.POST)
    @ResponseBody
    public String upload(MultipartFile file, HttpServletRequest request, HttpSession session) throws IOException{
        JSONObject json = new JSONObject();
        // 原始名称
        String originalFilename = file.getOriginalFilename();
        if (file != null && originalFilename != null && originalFilename.length() > 0) {
            //获取后缀名
            String sufixName = originalFilename.substring(originalFilename.indexOf("."));
            //重命名
            String newName = UUID.randomUUID() + sufixName;
            //设置文件上传的目录
            String picPath="E:\\imgUpload\\";
            File filePath=new File(picPath);
            //如果保存文件的地址不存在，就先创建目录
            if(!filePath.exists()){
                filePath.mkdirs();
            }

            // 新图片
            File newFile = new File(picPath+newName);
            // 将内存中的数据写入磁盘
            file.transferTo(newFile);

            session=request.getSession();


            json.put("code", 0);
            json.put("face", newName);
            System.out.println(json.toString());
            return json.toString();
        }
        json.put("code", 1);
        System.out.println(json.toString());
        return json.toString();
    }