如何实现文件上传功能

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

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

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

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:富文本编辑器内容*/
// 在富文本编辑器 插入 文件
所以我们首先要写一个新增上传的文件,在这里临时保存的文件夹的方法,接着再写上传附件 到临时文件夹。
如何实现文件上传功能_第2张图片
首先用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,文件类型名称,文件名称等等
如何实现文件上传功能_第3张图片
接着更新session,判断sessionFiles != null,若为true则,新增文件到sessionFiles中,在session中进行记录,再把数据返回给页面。
在页面中post提交方法中加上这个方法的路径,即可上传文件,当然你要想在页面上看到上传的文件就要写查询方法。我的文件上传案例就讲到这里了。鄙人学之尚浅,若有不对之处请给予矫正,感谢阅读。

你可能感兴趣的:(如何实现文件上传功能)