文件上传表单页面

开发工具与关键技术：Visual Studio 2015
作者：杨镇虹
撰写时间：2019.06.18
一、文件上传表单页面
//用#号选择器选择到页面临时上传文件的ID（getAttachmentFile）change 改变事件function方法
$("#getAttachmentFile").change(function () {
//var获取页面正在上传文件files的数据
var files = $(this).prop(“files”);
//if判断 临时上传文件files的length长度是否大于0
if (files.length > 0) {
//var获取上传文件的信息
var file = files[0];
//if判断 限制上传文件file大小 是否小于或者等于20M 上传的文件不能超过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
if (strText == “true”) {
//刷新附件列表 url请求控制器的路径
tabFiles.reload({
url: “/SystemManagement/IssuanceNotice/SelectSessionFiles”,
});
//上传成功的时候弹出一个提示框来提醒用户
layer.alert(“上传成功！”, { icon: 1 });
} else {
// alert提示框
layer.alert(strText, { icon: 2 });
}
};
//上传失败事件
xhr.onerror = function (event) {
layer.close(layerIndex);//关闭加载层
//上传失败时alert弹出一个提示框来提醒用户"上传失败！"
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 {//否则 上传文件时超过20M时就弹出一个提示框来提醒用户
layer.alert(“文件大小不能超过20M”, { icon: 0 });
}
} else {
layer.alert(“请选择文件”)
}
});