附件--文件上传

作者：李光辉

撰写时间：2019.5.27

在前一篇文献中介绍的文件上传，主要是依赖插件的方法实现使用，只是编码一些服务器里面的内容。而今天要介绍的是用编写的代码实现文件上传功能，上传文件的原理基本一致，只是需要编写的代码相对复杂一点。

如图，点击添加附件按钮，选择需要上传的文件，上传成功后的文件可以添加在数据表格中，同样的附件文件上传也是使用来选择要上传的文件。

限制获取上载文件的大小（以字节为单位），即上传的文件必须大于0，,小于下面判断所限制的文件大小，否则会出现上传文件失败。

什么是获取session中的文件表呢？session作为独立存放内容的容器，如果是第一次上传，即session中从来没出现过相同的内容，则获取的是一个空的列表；如果判断不为空，则获取session中曾保存过的内容使用。

同时可以更改配置项的限制，找到<system.web>标签下的内容加上maxRequestLength。

然后检查目录是否存在,不存在就创建

然后进行下面一系列操作，也就是拼接路径和保存的步骤，可通过注释内容加以理解；然后对文件的格式类型进行判断，例如视频、图片

然后我们需要构建一个files(文件)的Vo出来，如下图文件类型的ID，文件类型名称，文件名称，然后用Guid.NewGuid().ToString(“N”)给文件一个唯一的编号，N的作用是生成十六进制数字，最后拼接a标签。

然后就是更新session，那么为什么要前面获取session现在又要更新session？因为在附件上传附件的时候，在我们没有进行保存之前，上传的文件并没有存放在数据库，所有我们需要用一个容器存放，而浏览器最好的存放的地方就是session。而在我们进行下一次上传的时候，也可以判断session中是否曾上传过此文件，如果上传就直接转换出来使用。

下面是视图部分代码，不作介绍了仅供参考

 //getAttachmentFile 改变事件
        $("#getAttachmentFile").change(function () {
            var files = $(this).prop("files");
            if (files.length > 0) {
                var file = files[0];
                //限制文件大小 20M
                if (file.size<= 20*1024*1024) {
                    //====开始文件上传--使用XMLHttpRequest
                    //=new一个FormData对象
                    var fd = new FormData();
                    //=将第一个文件放入FormData
                    fd.append("attachmentFile", files[0]);
                    //=new一个XMLHttpRequest对象
                    var xhr = new XMLHttpRequest();
                    //=注册监听事件
                    //发送成功事件
                    xhr.onload = function (event) {
                        layer.close(layerIndex);//关闭加载层
                        var strText = event.currentTarget.responseText;
                        if (strText == "true") {
                            //刷新附件列表
                            tabFiles.reload({
                                url: "/SystemManagement/IssuanceNotice/SelectSessionFiles",
                            });
                            layer.alert("上传成功！", { icon: 1 });
                        } else {
                            layer.alert(strText, { icon: 2 });
                        }
                    };
                     //上传失败事件
                    xhr.onerror = function (event) {
                        layer.close(layerIndex);//关闭加载层
                        layer.alert("上传失败！", { icon: 2 });
                    };
                    //上传进度---会不断被调用
                    xhr.upload.onprogress = function (event) {
                        if (event.lengthComputable) {
                            // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
                            console.log(event.total + "--->" + event.loaded + "----->" + (event.loaded / event.total * 100) + "%");
                        }
                    };
                     //上传文件一定要用POST方式提交
                    xhr.open("POST", "/SystemManagement/IssuanceNotice/UploadAttachment");
                    //打开加载层
                    layerIndex = layer.msg('上传中...', {
                        icon: 16,
                        time: 0,
                        shade: 0.3
                    });
                    //发送数据
                    xhr.send(fd);
                     } else {
                    layer.alert("文件大小不能超过20M", { icon: 0 });
                }
                } else {
                layer.alert("请选择文件")
            }
        });