如何实现文件上传功能

开发工具与关键技术： VS MVC基础
作者：卢雅婷
撰写时间：2019/06/17

其实文件上传是我们平常与互联网交流的方式，发一篇文件要上传，同时我们从网上获取的文章、文件等等资源都是别人上传至网上的，所以说上传这个功能很常用哪它又是如何实现的呢？这就是我今天的分享内容上传文件功能的实现。（下面的代码来源于老师）

上传文件我们都知道点击上传按钮，再选择要上传的文件之类资料，确定即可上传，哪在这个过程中我们要如何处理这些文件呢？这就关系到文件的处理问题了。
首先我们要在页面上写一个关于文件上传的按钮和文件上传表单的HTML。如下图

Type为上传东西的类型，因为我们要上传的是文件，所以用文件类型file。
在页面写打开选择文件的文本框的方法，
function openUpAttachmentFile() {
$("#getAttachmentFile").click();
}
接着当getAttachmentFile 发生改变时，上传文件
function upAttachmentFile() {
避免上传成功后去掉value 时再次触发上传

if ($(’#getAttachmentFile’).val() == “” ||
$(’#getAttachmentFile’).val() == undefined) {
return;
}
接着获取选择的文件 var files = $(’#getAttachmentFile’).prop(“files”);
再判断这个上传的文件的大小是否已经超过限定的文件大小
而我这个实例判断文件大小–文件限制20M
if (files[0].size <= 20 * 1024 * 1024) {
开始文件上传–使用XMLHttpRequest， new一个FormData、XMLHttpRequest对象 ，将第一个文件放入FormData然后注册监听事件，发送成功事件
var fd = new FormData();
fd.append(“attachmentFile”, files[0]);
var xhr = new XMLHttpRequest();
xhr.onload = function (event) {
layer.close(layerIndex);//关闭加载层
var strText = event.currentTarget.responseText;
if (strText == “true”) {
刷新附件列表
tabFilesRefresh();
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", "/SystemManagements/IssuanceNotice/UploadAttachment");

//打开加载层 layerIndex = layer.msg(‘上传中…’, {
icon: 16,
time: 0,
shade: 0.3
});
//发送数据
xhr.send(fd);
清除掉目前的值，避免无法连续上传相同文件的问题（onchange事件的原因）
$(’#getAttachmentFile’).val("")
} else {
layer.alert(“文件大小不能超过20M”, { icon: 0 });
}
} else {
layer.alert(“1请选择要上传的文件”, { icon: 0 });
}
最后再刷新table，我们需要的文件已经提交到控制了，现在要去控制器写其方法。
一般我们会把文件保存到文件夹里面：这里我们在做发布公告的时候会创建几个文件夹，如下：
Temp 临时文件夹（上传的文件，在这里临时保存）
Notice 最终文件夹：
Attachment附件，
Image：富文本编辑器图片；
NoticeCarousel 轮播图片；
Text：富文本编辑器内容*/
// 在富文本编辑器 插入 文件
所以我们首先要写一个新增上传的文件，在这里临时保存的文件夹的方法，接着再写上传附件 到临时文件夹。

首先用try catch捕抓错误，获取上载文件的大小。判断其不能为空，为空则关闭模态框，再判断其不能大于20M,，大于则提示上传的文件不能大于20M，返回给页面，若不大于20M，获取session中的文件表，若Session[“sessionFiles”] != null则检查目录是否存在,不存在就创建，如上图。再获取文件类型，不包含文件扩展名的名称，文件名称，添加时间字符串，避免文件名称相同，保存文件的路径。接着保存文件，声明 int fileTypeId，和 string fileTypeName;
fileExtension = fileExtension.ToLower();
再判断传过来的文件类型是什么 如
if("(.mp4)|(.avi)|(.flv)|(.rmvb|(.rm)|(.3gp)|(.mkv)|(.dvd)|(.mpg)|(.mov)".Contains(fileExtension))
fileTypeId = 1;//视频
fileTypeName = “视频”;
}
用相对文件的后缀进行判断fileTypeId = 2;//音频，fileTypeId = 3;//文本，fileTypeId = 4;//文档，fileTypeId = 5;//图片， fileTypeId = 7;//其他
接着获取文件的信息：如文件类型ID,文件类型名称，文件名称等等

接着更新session，判断sessionFiles != null，若为true则，新增文件到sessionFiles中，在session中进行记录，再把数据返回给页面。
在页面中post提交方法中加上这个方法的路径，即可上传文件，当然你要想在页面上看到上传的文件就要写查询方法。我的文件上传案例就讲到这里了。鄙人学之尚浅，若有不对之处请给予矫正，感谢阅读。