原理就不做介绍了,就是在前端先循环对文件进行分块,然后分别发送到后台,所有分块发送完成后,后台对文件进行合并。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../Scripts/layui/css/layui.css" rel="stylesheet" />
<link href="../Css/fileUpload.css" rel="stylesheet" />
<link href="../Css/UpLoadFile.css" rel="stylesheet" />
<link href="../Scripts/layui/layui_exts/dtree/dtree.css" rel="stylesheet" />
<link href="../Scripts/layui/layui_exts/dtree/font/dtreefont.css" rel="stylesheet" />
<script src="../Scripts/Jquery1.12.4/jquery-1.12.4.min.js"></script>
<script src="../Scripts/layui/layui.js"></script>
<script src="../JS/plupload.full.min.js" type="text/javascript"></script>
<script src="../JS/jquery.base64.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap3.3.7/js/bootstrap.js"></script>
<link href="../Scripts/bootstrap3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="../Scripts/layui/layui_exts/dtree/dtree.css" rel="stylesheet" />
<link href="../Scripts/layui/layui_exts/dtree/font/dtreefont.css" rel="stylesheet" />
<script>
document.write("<script type='text/javascript' src='../JS/ImageServiceDemo.js?rnd=" + Math.random() + "'><\/script>");
</script>
</head>
<body>
<div style="width:100%">
<div style="float:left;margin-right:0px;margin-left20px;border-color:aquamarine">
<ul id="imageTypesTree" class="dtree" data-id="0" style="width:300px;"></ul>
</div>
<div style="float:left;width:800px;">
<div style="text-align:center" class="form-horizontal">
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
<div class="layui-progress-bar layui-bg-green" lay-percent="0%" id="uploadProgress" style="display:none;"></div>
</div>
<div class="form-group">
<input type="file" multiple id="file" onchange="javascript:onc();" />
</div>
<div class="form-group">
<label for="lastname" class="col-md-2 control-label">计划内码</label>
<div class="col-md-10">
<input type="text" class="form-control" id="jhid" placeholder="计划内码" value="f2617b63-264c-496d-a5de-14725c23941a">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-2 control-label">移交记录内码</label>
<div class="col-md-10">
<input type="text" class="form-control" id="yjjlid" placeholder="计划内码" value="9e6b2a12-89a1-4b7c-81a9-3486aaad3474">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">请选择档案类别</label>
<div class="col-sm-10">
<select name="dassfl" id="dassfl" class="form-control">
<option value=""></option>
<option value="td">土地</option>
<option value="fwjzw">房屋建筑物</option>
<option value="swzc">实物资产</option>
<option value="fswzc">非实物资产</option>
<option value="cw">财务</option>
<option value="ry">人员</option>
<option value="da">档案</option>
<option value="wt">问题</option>
</select>
</div>
</div>
<div class="form-group">
<button class="layui-btn layui-btn-radius layui-btn-normal" type="button" onclick="sendRequest();" style="width:150px;">上传大文件</button>
<button id="btnUpload" class="layui-btn layui-btn-radius layui-btn-normal" type="button" style="width:150px;">上传</button>
<button id="getFilesInfo" class="layui-btn layui-btn-radius layui-btn-normal" type="button" style="width:150px;" onclick="getFilesInfo();">获取附件</button>
</div>
<div style="text-align:center;margin-top:25px;">
<div id="filelist"></div>
</div>
</div>
</div>
</div>
</body>
</html>
js脚本
var uploadFiles = new Array();
var layer;
var dtree = null;
var imageTypesTree = null;
var selectTreeNodeId = '';
var BYTES_PER_CHUNK = 1024 * 1024 * 2; // 每个文件切片大小定为2MB .
var slices;
var totalSlices;
$(function () {
$("#btnUpload").click(function () {
checkFileExist(Upload);
});
layui.use('layer', function () {
layer = layui.layer;
});
getImageType();
$('#dassfl').change(function () {
getImageType();
});
})
function AddFiles(files) {
var errstr = "";
for (var i = 0; i < files.length; i++) {
var filename = files[i].name;
var isfind = false;
for (var j = 0; j < uploadFiles.length; j++) {
if (uploadFiles[j].name == filename) {
isfind = true;
break;
}
}
var index1 = filename.lastIndexOf(".");
var index2 = filename.length;
var postf = filename.substring(index1 + 1, index2);//后缀名
var myarray = new Array('JPG', 'jpg', 'jpeg', 'JPEG', 'gif', 'GIF', 'png', 'PNG');
if (isfind == false) {
uploadFiles.push(files[i]);
}
if (errstr != "") {
layer.alert("文件格式错误:" + errstr);
}
}
}
function onc() {
var files = document.getElementById("file").files;
if (files.length < 0) {
return;
}
AddFiles(files);
}
function Upload() {
var param = dtree.getNowParam(imageTypesTree);
if (JSON.stringify(param) == "{}") {
layer.alert('请选择档案类别');
return;
}
var dalb = param.nodeId;
var jhid = $('#jhid').val();
var yjjlid = $('#yjjlid').val();
var dassfl = $('#dassfl').val();
var files = document.getElementById("file").files;
if (files.length <= 0) {
alert('请先选择要上传的文件');
return;
}
if (uploadFiles.length <= 0) {
alert('上传成功');
return;
}
var formData = new FormData();
formData.append("file", uploadFiles[0]);
formData.append('jhid', jhid);
formData.append('dassfl', dassfl);
formData.append('dalb', dalb);
formData.append('yjjlid', yjjlid);
$.ajax({
url: "../Controller/ImageService.ashx?func=uploadimage",
type: "POST",
data: formData,
processData: false,
contentType: false,// 不设置内容类型
success: function (data) {
debugger
var result = JSON.parse(data);
if (result.IsSuccess != "1") {
alert(result.Msg);
}
uploadFiles.splice(0, 1);
Upload();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
}
});
}
function checkFileExist(callBack) {
var param = dtree.getNowParam(imageTypesTree);
if (JSON.stringify(param) == "{}") {
layer.alert('请选择档案类别');
return;
}
var dalb = param.nodeId;
var jhid = $('#jhid').val();
var yjjlid = $('#yjjlid').val();
var dassfl = $('#dassfl').val();
var files = document.getElementById("file").files;
if (files.length <= 0) {
alert('请先选择要上传的文件');
return;
}
var fileExistCheckArr = new Array();
for (var i = 0; i < files.length; i++) {
fileExistCheckArr.push(files[i].name);
}
$.ajax({
url: "../Controller/ImageService.ashx?func=checkimageexist",
type: "POST",
async: false,
data: { 'jhid': jhid, 'dassfl': dassfl, 'dalb': dalb, 'yjjlid': yjjlid, 'fileNames': JSON.stringify(fileExistCheckArr) },
success: function (data) {
debugger
var result = JSON.parse(data);
if (result.IsSuccess == "-1") {
layer.confirm(result.Msg, { icon: 3, title: '提示' }, function (index) {
if (index == 1) {
layer.closeAll();
callBack();
}
});
} else {
callBack();
alert(result.Msg);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
}
});
}
function getFilesInfo() {
var param = dtree.getNowParam(imageTypesTree);
if (JSON.stringify(param) == "{}") {
layer.alert('请选择档案类别');
return;
}
var dalb = param.nodeId;
var jhid = 'f2617b63-264c-496d-a5de-14725c23941a';
var dalb = '581ef7f3-4737-4258-8915-8c86f7121903';
var yjjlid = '9e6b2a12-89a1-4b7c-81a9-3486aaad3474';
var dassfl = $('#dassfl').val();
if (dassfl == 'da') {
jhid = 'f09fb1f1-f5f9-4fb9-aeed-2b03e2a50034';
dalb = '43aba81f-e803-4db1-8a5c-b626853ebf28';
yjjlid = '';
}
$.ajax({
url: "../Controller/ImageService.ashx?func=getimage",
type: "POST",
async: false,
data: { 'jhid': jhid, 'yjjlid': yjjlid, 'dassfl': dassfl },
success: function (data) {
debugger
var result = JSON.parse(data);
if (result.IsSuccess == "-1") {
} else {
var filelistArr = JSON.parse(result.Data);
$.each(filelistArr, function (index, value) {
$("#filelist").append("<a href='javascript:void(0)' id='" + value.FileID + "' FileID='" + value.FileID + "' BillID='" + value.BillID + "' FileType='" + value.FileType + "' onclick='downLoadImage(this)'>" + value.FileName + "</a><span onclick='deletefile(this)'>删除</span><br/>");
})
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
}
});
}
function downLoadImage(obj) {
var fileid = $(obj)[0].id;
var filename = $(obj).text();
url = "../Controller/ImageService.ashx?func=downloadimage&fileid=" + fileid;
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
var a = document.createElement('a');
a.download = filename;
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
} else {
layer.alert('获取文件失败');
}
};
xhr.send();
}
function deletefile(obj) {
var fileid = $(obj).prev("a").attr("FileID");
var BillID = $(obj).prev("a").attr("BillID");
var FileType = $(obj).prev("a").attr("FileType");
var filename = $(obj).prev("a").text();
var jhid = 'f2617b63-264c-496d-a5de-14725c23941a';
var dalb = '581ef7f3-4737-4258-8915-8c86f7121903';
var yjjlid = '9e6b2a12-89a1-4b7c-81a9-3486aaad3474';
var dassfl = $('#dassfl').val();
if (dassfl == 'da') {
jhid = 'f09fb1f1-f5f9-4fb9-aeed-2b03e2a50034';
dalb = '43aba81f-e803-4db1-8a5c-b626853ebf28';
yjjlid = '';
}
$.ajax({
url: "../Controller/ImageService.ashx?func=deleteimage",
type: "POST",
async: false,
data: { 'fileid': fileid, 'filename': filename, 'jhid': jhid, 'yjjlid': yjjlid, 'dassfl': dassfl, 'dalb': dalb },
success: function (data) {
debugger
var result = JSON.parse(data);
if (result.IsSuccess == "-1") {
alert(result.Data);
} else {
alert('删除成功');
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
}
});
}
function getImageType() {
var jhid = $('#jhid').val();
var yjjlid = $('#yjjlid').val();
var dassfl = $('#dassfl').val();
var step = 'sjcj';
debugger
$.ajax({
url: "../Controller/ZCJSMainPage.ashx?func=getimagetypetree",
type: "POST",
data: { step: step, dassfl: dassfl, jhid: jhid },
success: function (data) {
debugger
var result = JSON.parse(data);
if (result.success == "-1") {
layer.alert(result.msg);
} else {
layui.config({
base: '../Scripts/layui/lay/modules/' //配置 layui 第三方扩展组件存放的基础目录
}).extend({
dtree: 'dtree'
}).use(['element', 'layer', 'dtree'], function () {
dtree = layui.dtree, layer = layui.layer, $ = layui.$;
// 初始化树
imageTypesTree = dtree.render({
elem: "#imageTypesTree",
data: JSON.parse(result.data) // 使用data加载
});
// 绑定节点点击
dtree.on("node('imageTypesTree')", function (obj) {
selectTreeNodeId = obj.param.nodeId;
GetFilesInfoDATree(jhid, dassfl, '', step, obj.param.nodeId);
});
});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.alert(XMLHttpRequest.responseText);
}
});
}
//发送请求
function sendRequest() {
var param = dtree.getNowParam(imageTypesTree);
if (JSON.stringify(param) == "{}") {
layer.alert('请选择档案类别');
return;
}
var dalb = param.nodeId;
var jhid = $('#jhid').val();
var yjjlid = $('#yjjlid').val();
var dassfl = $('#dassfl').val();
var files = document.getElementById("file").files;
while (uploadFiles.length > 0) {
var blob = uploadFiles[0];
var start = 0;
var end;
var index = 0;
var guid = newGuid();
console.log(guid);
// 计算文件切片总数
slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
totalSlices = slices;
while (start < blob.size) {
end = start + BYTES_PER_CHUNK;
if (end > blob.size) {
end = blob.size;
}
if (uploadFile(blob, index, start, end, guid, jhid, yjjlid, dassfl, dalb) < 0) {
break;
}
start = end;
index++;
if (index >= totalSlices) {
$("#uploadProgress").css('display', 'none');
}
}
uploadFiles.splice(0, 1);
}
}
//上传文件
function uploadFile(blob, index, start, end, guid, jhid, yjjlid, dassfl, dalb) {
var formData;
var chunk;
var sliceIndex = blob.name + index;
chunk = blob.slice(start, end);//切割文件
formData = new FormData();
formData.append("FileName", chunk, sliceIndex);
formData.append("filename", blob.name);
formData.append("chunk", index);
formData.append("sliceIndex", sliceIndex);
formData.append("chunks", totalSlices);
formData.append('jhid', jhid);
formData.append('dassfl', dassfl);
formData.append('dalb', dalb);
formData.append('yjjlid', yjjlid);
formData.append('guid', guid);
$.ajax({
url: '../Controller/ImageService.ashx?func=uploadimage',
type: "POST",
data: formData,
processData: false,
contentType: false,// 不设置内容类型
success: function (data) {
var result = JSON.parse(data);
var currentChunk = parseInt(data.Msg);
if (result.IsSuccess == "0") {
var percent = parseInt((currentChunk / totalSlices) * 100);
$("#uploadProgress").css('display', 'block').attr('lay-percent', percent.toFixed() + '%');
return 0;
} else if (result.IsSuccess == "1") {
layer.alert('上传完成');
return 1;
} else {
layer.alert('上传失败,原因为:' + result.Msg);
return -1;
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
}
});
}
function newGuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
一般处理程序
#region 上传影像文件
/// <summary>
/// 上传影像
/// </summary>
/// <param name="context"></param>
public void UploadImage(HttpContext context)
{
string jhid = string.Empty;//计划ID
string dassfl = string.Empty;//档案所属分类
string yjjlid = string.Empty;//移交记录ID
string dalb = string.Empty;//档案类别
string rwjd = string.Empty;//任务阶段
HttpFileCollection files = context.Request.Files; ;//要检查的文件列表
string result = string.Empty;
if (!context.Request.Params.AllKeys.Contains("jhid"))
{
result += "计划ID不能为空;";
}
if (!context.Request.Params.AllKeys.Contains("dassfl"))
{
result += "所属分类不能为空;";
}
if (!context.Request.Params.AllKeys.Contains("dalb"))
{
result += "附件类别不能为空;";
}
jhid = context.Request.Params["jhid"];
dassfl = ConvertDassfl2Lower(context.Request.Params["dassfl"]);
dalb = context.Request.Params["dalb"];
if (context.Request.Params.AllKeys.Contains("yjjlid"))
{
yjjlid = context.Request.Params["yjjlid"];
}
if (context.Request.Params.AllKeys.Contains("rwjd"))
{
rwjd = context.Request.Params["rwjd"];
}
if (context.Request.Form.AllKeys.Contains("chunk"))
{
//取得chunk和chunks
int chunk = Convert.ToInt32(context.Request.Form["chunk"]);//当前分片在上传分片中的顺序(从0开始)
int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//总分片数
string fileName = context.Request.Form["filename"];//文件实际名称
string guid = context.Request.Form["guid"]; ;
//根据GUID创建用该GUID命名的临时文件夹
string folder = fileSavePath + "\\" + guid + "\\";
string path = folder + chunk;
//建立临时传输文件夹
if (!Directory.Exists(Path.GetDirectoryName(folder)))
{
Directory.CreateDirectory(folder);
}
FileStream addFile = new FileStream(path, FileMode.Append, FileAccess.Write);
BinaryWriter AddWriter = new BinaryWriter(addFile);
//获得上传的分片数据流
HttpPostedFile file = context.Request.Files[0];
Stream stream = file.InputStream;
BinaryReader TempReader = new BinaryReader(stream);
//将上传的分片追加到临时文件末尾
AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
//关闭BinaryReader文件阅读器
TempReader.Close();
stream.Close();
AddWriter.Close();
addFile.Close();
TempReader.Dispose();
stream.Dispose();
AddWriter.Dispose();
addFile.Dispose();
//合并文件
ProcessRequestFiles(guid, fileName, chunks, jhid, dassfl, yjjlid, dalb, rwjd);
}
else
{
if (files.Count <= 0)
{
result += "文件信息不能为空;";
}
if (!string.IsNullOrEmpty(result))
{
ResponseInfo responseInfo = new ResponseInfo
{
IsSuccess = "-1",
Msg = result.TrimEnd(';'),
Data = ""
};
context.Response.Write(JsonConvert.SerializeObject(responseInfo));
}
else//执行判断
{
ResponseInfo responseInfo = new ResponseInfo();
string msg = string.Empty;
responseInfo.IsSuccess = ImageServiceCore.CreateInstance().UploadImage(jhid, dassfl, yjjlid, dalb, files, out msg);
responseInfo.Msg = msg;
context.Response.Write(JsonConvert.SerializeObject(responseInfo));
}
}
}
#endregion
private void ProcessRequestFiles(string guid, string fileName, int chunks, string jhid, string dassfl, string yjjlid, string dalb, string rwjd)
{
HttpContext context = System.Web.HttpContext.Current;
context.Response.ContentType = "text/plain";
string sourcePath = fileSavePath + "\\" + guid + "\\";//源数据文件夹
string targetPath = fileSavePath + "\\" + guid + "\\" + fileName;//合并后的文件
DirectoryInfo dicInfo = new DirectoryInfo(sourcePath);
ResponseInfo responseInfo = new ResponseInfo();
try
{
if (Directory.Exists(sourcePath))
{
FileInfo[] files = dicInfo.GetFiles();
if (files.Length != chunks)
{
responseInfo = new ResponseInfo
{
IsSuccess = "0",
Msg = "",
Data = ""
};
context.Response.Write(JsonConvert.SerializeObject(responseInfo));
return;
}
foreach (FileInfo file in files.OrderBy(f => int.Parse(f.Name)))
{
FileStream addFile = new FileStream(targetPath, FileMode.Append);
BinaryWriter AddWriter = new BinaryWriter(addFile);
//获得上传的分片数据流
Stream stream = file.Open(FileMode.Open);
BinaryReader TempReader = new BinaryReader(stream);
//将上传的分片追加到临时文件末尾
AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
//关闭BinaryReader文件阅读器
TempReader.Close();
stream.Close();
AddWriter.Close();
addFile.Close();
TempReader.Dispose();
stream.Dispose();
AddWriter.Dispose();
addFile.Dispose();
}
using (FileStream fileStream = new FileStream(targetPath, FileMode.Open))
{
string msg = string.Empty;
responseInfo.IsSuccess = ImageServiceCore.CreateInstance().UploadImage(jhid, dassfl, yjjlid, dalb, fileStream, fileName, rwjd, out msg);
responseInfo.Msg = msg;
responseInfo.Data = chunks.ToString();
}
//删除文件夹
string delPath = fileSavePath + "\\" + guid;
if (Directory.Exists(delPath))
{
Directory.Delete(delPath, true);
}
context.Response.Write(JsonConvert.SerializeObject(responseInfo));
}
else
{
responseInfo = new ResponseInfo
{
IsSuccess = "-1",
Msg = "获取存储目录失败",
Data = ""
};
context.Response.Write(JsonConvert.SerializeObject(responseInfo));
}
}
catch (Exception ex)
{
responseInfo = new ResponseInfo
{
IsSuccess = "-1",
Msg = ex.Message,
Data = ""
};
context.Response.Write(JsonConvert.SerializeObject(responseInfo));
}
}
结束。
11.26号过期,请参考https://www.xiangcaowuyu.net/devtools/20202-intellij-idea-activation-expired-on-november-26-resolved.html
谢谢哦