HTML5实现分段上传，支持断点续传

高级JavaScript组件

下载此实例

开发语言：js
实例大小：3.77M
下载次数：22
浏览次数：968
发布时间：2018-06-01
实例类别：高级JavaScript组件
发布人：zhanglc8801
文件格式：.7z
所需积分：2

相关标签： HTML5 文件上传断点续传

网友评论举报投诉收藏该页

下载此实例

实例介绍

[下载地址]

【实例简介】

HTML5上传部分参考博客：http://www.cnblogs.com/tianma3798/p/5836369.html

已对js代码进行了封装，可直接调用，另增加了在前端获取文件MD5值以及将支持文件上传到WebService。

使用了SQLite数据库用于保存文件信息（文件名，保存路径，MD5），获取文件MD5部分如集成到项目需更改引用的js文件"GetFileMd5.js"的头部第一行所引用js的路径。

【实例截图】

【核心代码】

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.7.2.min.js"></script>
<script src="Scripts/GetFileMd5/GetFileMd5.js"></script>
<script src="Scripts/UploadFile.js"></script>
</head>
<body>

<div>
<input type="file" id="FileUpload1" runat="server" style="width: 350px; margin-bottom: 5px;" /><br />
<input type="radio" name="UploadType" value="0" checked="checked" /><label style="margin-left: 2px; margin-top: -2px; vertical-align: middle;">本地</label> 
<input type="radio" name="UploadType" value="1" /><label style="margin-left: 2px; margin-top: -2px; vertical-align: middle;">远程文件服务器</label>
<br />
<input type="button" id="BtnUploadFile" onclick="UploadFile()" value="上传" style="width: 60px; height: 22px; vertical-align: text-bottom;" />
<progress id="progress" max="100" value="0" style="width: 200px; vertical-align: baseline; display: none;"></progress>
<label id="Status" style="margin-left: 3px; vertical-align: bottom;"></label>

</div>

<script type="text/javascript">
var fileMd5 = "";
var IsUpload = 0;//标识文件是否上传
$("#FileUpload1").change(function () {
if (this.size > 0)
IsUpload = -1;

});

function UploadFile() {
var file = document.getElementById("FileUpload1").files[0];
if (file == null) {
alert("请选择需要上传的文件！");
return;
}
document.getElementById("progress").style.display = "";
FileMd5Func.GetMd5('FileUpload1', 'progress', 'Status', fileMd5Callback);//获取文件MD5
}

function fileMd5Callback(data) {
fileMd5 = data;
//设置上传文件夹
var date = new Date();
var UpFolder = "Files\\" date.getFullYear() "\\" (date.getMonth() 1);
var isLocalFile = $("input[name='UploadType']:checked").val();
$.powerWebUpload({
fileId: 'FileUpload1',
GetFileInfoUrl: '/Scripts/GetFileInfo.ashx',
UploadFileUrl: '/Scripts/UploadFile.ashx',
StatusId: 'Status',
progressId: 'progress',
FileDir: UpFolder,
IsLocalFile: isLocalFile == 0 ? true : false,
fileMd5:fileMd5,
onComplete: function (data) {
//alert(data);
IsUpload = 1;//标识文件已上传
$.ajax({
type: "post",
url: "Index.aspx/SaveFileInfoAjax",
data: "{'data':'" data "'}",
contentType: "Application/json;charset=utf-8",
success: function (msg) {
alert(msg.d);//弹出文件保存地址
}
})

}
});
}
</script>
</body>
</html>

标签： HTML5 文件上传断点续传

实例下载地址