在网页开发中，经常会遇见需要进行文件上传到功能，例如：上传图像文件、其他类型的文件。

对此可以使用layui的lay_上传功能实现文件上传。

一段layui文件上传的完整代码如下：

<图片框 图像地址="" 行内样式="宽度: 100px;高度: 100px;背景-颜色: 颜色值-橙色;" id="头像上传" 错替文本="点我选择图片上传">
    <脚本>
        //注意:上传文件可以是任意的地址!
        局部变量 头像上传 = 新建对象 lay_上传({
            [lay_上传.配置.绑定元素]: "#头像上传",
            [lay_上传.配置.上传地址]: "/postFile",
            [lay_上传.配置.对话框类型]: 'image/*',
            //允许上传的文件类型,详情参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
            [lay_上传.配置.自动]: 真,
            [lay_上传.配置.选择]: 定义函数 (上传选择对象) {
                //预读本地文件示例,不支持ie8
                上传选择对象.预读(定义函数 (序号, 文件, base64编码) {
                    $("#头像上传").属性值("src", base64编码);
                });
            },
            [lay_上传.配置.进度]: 定义函数(n, elem, res, index){
                调试输出(n, elem, res, index)
                //这里可以查看到上传到进度
            },
            [lay_上传.配置.完成]: 定义函数(res, index, upload){
                调试输出(res, index, upload,"上传完成")
            }
        });
    </脚本>

知识点：在上传代码中，通过一个图片框标签，并给这个图片框标签设置了一个ID；点击图片框标签就会出发上传功能【触发上传功能是通过ID实现，也就是任意的标签都可以通过ID来触发上传】

知识点：[lay_上传.配置.绑定元素]: "#头像上传", 这段代码就是绑定标签，你的标签可以是任意的标签，只要有ID绑定在这个代码位置即可。

知识点： [lay_上传.配置.上传地址]: "/postxxxxx", 这段代码定义服务器接收文件数据的地址。

知识点：[lay_上传.配置.对话框类型]: 'image/*', 这段代码定义上传文件的类型，也就是选择文件对话框的类型。

知识点：下面的三个函数分别是：选择文件后的预读、上传过程中的进度改变、上传完成的触发等

知识点：选择文件后的预读一般只有在上传图片文件并需要在网页中展示图片文件时才需要使用！

知识点：上传文件，后端必须返回一个JSON。

 

服务端接收到文件后的展示情况：

可以看见服务端接收到文件后，与表单上传到方式一样，会在上传文件属性中储存文件的数据。

此时只需要调用桌面端的文件操作命令写出文件到服务端即可：

文件操作类.写到文件("文件地址",访问信息["上传文件"][0]["数据"]);

注意：上面的代码是常规POST事件-非文件上传属性绑定的代码方案，如果你是文件上传属性绑定，则可以参考下述代码【或参考该博客：后端绑定上传文件URL案例】：

HTTP服务类.启动服务(
    {
        "端口": 8081,
        "域名": "0.0.0.0",
        "拒绝访问": [],
        "首页文件": "@名称_文件上传.lhtml",
        "文件上传": {
            "保存目录": 文件操作类.取资源目录(),
            "触发链接": ["/postFile"]
        }
    },
    (反馈信息) => {
        调试输出(反馈信息);
    },
    (访问信息, 整体信息) => {
        如果 (访问信息["文件数据"]) {
            如果 (访问信息["文件数据"]["文件数据"]) {
                返回 { "发送数据": 访问信息["文件数据"]["文件数据"], "数据协议": HTTP服务类.获取数据协议(访问信息["文件后缀"]) };
            }
        }
        返回 { "发送数据": "你好，世界", "数据协议": HTTP服务类.获取数据协议("html") };
    },
    (访问信息, 整体信息) => {
        调试输出(访问信息);
        返回 { "发送数据": JSON类.到可读JSON文本({"状态":"成功"}), "数据协议": HTTP服务类.获取数据协议("json") };
    }
);

知识点：服务端收到上传的文件数据后需要返回JSON数据，如下方代码：

返回 { "发送数据": JSON类.到可读JSON文本({"状态":"成功"}), "数据协议": HTTP服务类.获取数据协议("json") };

知识点：返回的JSON代码格式随便定义！