Layui上传系列之一（小试牛刀原理为先）

第一次使用前后端分离模式进行系统开发，原料：WebForm、Layui、Handler（ashx页面后端）。由于使用了LayUI，那么上传文件就历史性的使用了Layui的uploader插件。

遵循凡事先梳理原理的准则，对uploader做一个大概了解，这layui再好看，上传本质离不开file，后端只管接收file对象就好了。有个这个认识，那么就可以先来一个最简单的上传了。

前端html：

<button type="button" class="layui-btn" id="test">
    <i class="layui-icon">&#xe67c;</i>上传附件
</button>

js：

var uploadTest = upload.render({
                elem: '#test' //绑定元素
                , url: '<%=AppPath%>/Sys/Handler/FileUploadHandler.ashx?action=UploadNoChunk' //上传接口
                , accept: 'file'
                , auto: true
                , multiple: true
                , done: function (res) {
                    if (checkResult(res, '上传失败')) {
                        layer.msg('上传成功');
                    }
                }
                , allDone: function (obj) { //多文件上传完毕后的状态回调
                    console.log(obj)
                }
            });

后端：

        /// <summary>
        /// 上传文件（不分块）
        /// </summary>
        /// <returns></returns>
        protected ApiData UploadNoChunk()
        {
            ApiData res = ApiData.Success();

            HttpFileCollection files = HttpContext.Current.Request.Files;

            if (files.Count > 0)
            {
                HttpPostedFile file = files[0];

                string filePath = Context.Server.MapPath("~/Temp");
                if (!Directory.Exists(filePath))
                {
                    Directory.CreateDirectory(filePath);
                }

                filePath = Path.Combine(filePath, Convert.ToString(Guid.NewGuid()));

                file.SaveAs(filePath);
            }

            return res;
        }

最简单的上传就实现了，在这里我只是把文件存到了应用程序根目录下的Temp文件夹下。

实际情况下，我们会上传大文件，那么就会涉及到分块上传，

下一篇，我们就来说说分块上传。

 Layui上传系列之二（多文件分块上传优化实现）_龙井茶的Sky-CSDN博客https://blog.csdn.net/to_love_/article/details/120659906 Layui上传系列之三（插件封装，简化开发）_龙井茶的Sky-CSDN博客https://blog.csdn.net/to_love_/article/details/120660380