基本信息
源码名称:HTML5实现分段上传,支持断点续传
源码大小:3.77M
文件格式:.7z
开发语言:js
更新时间:2018-06-01
   友情提示:(无需注册或充值,赞助后即可获取资源下载链接)

     嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300

本次赞助数额为: 2 元 
   源码介绍

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>&nbsp;
        <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>