原

网页上传文件断点续传的实现，无视文件大小上传，以及datatables基本用法

3055人阅读 2018/12/11 21:11 总访问：30018 评论：0 收藏：0 手机

分类: js

首先明白js是客户带执行代码，c#是服务器上执行代码。本地文件需要用到js处理，服务器端接受c#代码处理
1.HTML页面，文件信息列表用的是datatables.js 不用，那部分可不看：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUpload.aspx.cs" Inherits="LY.CIP.Component.VCS.FileUpload" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="media/js/jquery-3.1.1.min.js" type="text/javascript"></script>
    <link href="media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="FromDataFileupload.js" type="text/javascript"></script>
    <style type="text/css">
        .text-center
        {
            text-align: center;
        }
        .text-left
        {
            text-align: left;
        }
        .text-right
        {
            text-align: right;
        }
        /* dataTables某些标题字体小一号，可以在标题<th><p>测试字体小一号</th>，就可以设置某些列特殊的样式 */
        table.dataTable thead th, table.dataTable thead td
        {
            text-align: center;
            font-weight: normal;
            border-bottom: 0px solid #111;
        }
        body
        {
            font-size: 9pt;
            font-family: 宋体;
        }
        td
        {
            font-size: 9pt;
            font-family: 宋体;
        }
        span
        {
            font-size: 9pt;
            font-family: 宋体;
        }
        button
        {
            font-size: 9pt;
            font-family: 宋体;
            cursor: pointer;
            border-top: #9bc5dd 1px solid;
            height: 22px;
            border-right: #9bc5dd 1px solid;
            background-image: url(/Images/button_bg.jpg);
            background-repeat: repeat-x;
            border-bottom: #9bc5dd 1px solid;
            padding-bottom: 0px;
            padding-top: 2px;
            padding-left: 5px;
            margin: 5px;
            border-left: #9bc5dd 1px solid;
            padding-right: 5px;
        }
        input
        {
            font-size: 9pt;
            font-family: 宋体;
        }
        select
        {
            font-size: 9pt;
            font-family: 宋体;
        }
    </style>
</head>
<body>
    
    <div style="width: 96%; margin-left: 2%;">
        <span style="color: #3b516d;">上传区域</span>
        <div style="padding: 0px 0px 0px 5px; width: 100%; border: 1px #b5c7e8 solid">
            <table style="width: 100%">
                <tr>
                    <td style="text-align: right; width: 20%;">
                        附件名：
                    </td>
                    <td style="width: 30%;">
                        <input id="fjm" style="width: 100%;" />
                    </td>
                    <td style="text-align: right; width: 20%;">
                        附件类型：
                    </td>
                    <td style="width: 30%;">
                        <select id="types" style="width: 100%;">
                            <% if (optoiondt != null)
                               {
                                   foreach (System.Data.DataRow item in optoiondt.Rows)
                                   {%>
                            <option value="<%=item["lookup_value_code"] %>">
                                <%=item["lookup_value_name"]%></option>
                            <%  }
                               }
                            %>
                        </select>
                    </td>
                </tr>
                <tr>
                </tr>
                <tr>
                    <td style="text-align: right;">
                        附件上传：
                    </td>
                    <td style="text-align: left;">
                        <input type="file" id="file" style="width: 100%;" />
                    </td>
                    <td style="text-align: right;">
                        上传状态：
                    </td>
                    <td  style="text-align: left;">
                     <span id="output" style="font-size: 12px; margin-left: 10px;">等待</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="text-align: right;">
                       <button id="upload" style="width: 65px;">
                            上传</button>
                        <button id="Button1" style="width: 65px;">
                            暂停</button>
                        <button id="Button2" style="width: 65px;">
                            开始</button>
                        <button id="Button3" style="width: 65px; ">
                            取消</button>
                    </td>
                </tr>
            </table>
        </div>
        <span style="color: #3b516d;">附件区</span>
        <div id="datablesd" style="border: 1px #b5c7e8 solid">
        </div>
    </div>
</body>
</html>

2.用js分段文件：

var isload = 6; //上传状态,初始状态6，上传状态0，暂停状态1，取消状态2
var loadi = 0; //上传位置
var succeed = 0; //已上传的位置
var name = ''; //文件名称
var shardCount; //文件总片数
var filenameing = ''; //记录上个上传文件的名称
 
 
//判断文件是否存在
var isExistFile = function (url) {
    var relt = false;
    try {
        $.ajax({
            url: "Handler/FileUpload.ashx",
            type: "POST",
            data: { isload: "fly", filename: url },
            async: false,         //bu异步
            success: function (result) {
                if (result == "1") relt = true;
            }
        });
    } catch (e) {
 
    }
    return relt;
};
 
var page = {
    init: function () {
        var my = this;
        // $("#upload").click($.proxy(my.upload, my));
        $("#upload").on('click', function () {
            if ($("#file")[0].files[0] == undefined) {
                alert("你还未选择上传文件！");
                return;
            }
            //选择文件的文件名
            var filenamete = $("#file")[0].files[0].name;
            //重置文件状态
            if (filenameing != filenamete) {
                isload = 6;
            }
            //截取文件后缀
            var nametype = filenamete.substring(filenamete.lastIndexOf(".") + 1, filenamete.length);
            if ($("#fjm").val() == '' || $("#fjm").val() == undefined) { isload = 6; return alert('请输入文件名再上传！'); }
            name = $("#fjm").val() + '.' + nametype;        //文件名
            //判断是否存在文件
            if (isExistFile(name))
            { return alert("该附件已存在请修改附件名！"); }
            //判断文件是否正在上传
            if (isload == 0) {
                return alert("该附件已在上传！");
            }
            //文件最开始上传时候：状态为0，上传进度为0，已上传的位置为0
            isload = 0;
            loadi = 0;
            succeed = 0;
            my.upload();
        })
        //暂停
        $("#Button1").on('click', function () {
            if (isload == 6) {
                return alert("你还未上传文件！");
            }
            isload = 1;
        })
        //开始
        $("#Button2").on('click', function () {
            if ($("#file")[0].files[0] == undefined) {
                alert("你还未选择上传文件！");
                return;
            }
            //选择文件的文件名
            var filenamete = $("#file")[0].files[0].name;
            //截取文件后缀
            var nametype = filenamete.substring(filenamete.lastIndexOf(".") + 1, filenamete.length);
            if ($("#fjm").val() == '' || $("#fjm").val() == undefined) { isload = 6; return alert('请输入文件名再上传！'); }
            name = $("#fjm").val() + '.' + nametype;        //文件名
            //判断是否存在文件
            if (isExistFile(name))
                return alert("该附件已存在请修改附件名！");
            //判断文件是否正在上传
            if (isload == 0) {
                return alert("该附件上传未暂停！");
            }
            //文件开始上传时候：状态为0，其他不变
            isload = 0;
            loadi = loadi - 1;
            my.upload();
        })
        //取消
        $("#Button3").on('click', function () {
            if ($("#fjm").val() == '' || $("#fjm").val() == undefined) { isload = 6; return alert('你还未上传！'); }
            if ($("#file")[0].files[0] == undefined) {
                alert("你还未上传！");
                return;
            }
            //文件取消上传时候：状态为2，上传进度为0，已上传的位置为0
            isload = 2;
            setTimeout(function () {
                //Ajax提交
                $.ajax({
                    url: "Handler/FileUpload.ashx",
                    type: "POST",
                    data: { deletes: "all", filename: name, shardCount: shardCount },
                    async: true,         //异步
                    success: function (result) {
                        $("#output").text(result);
                    }
                });
                //删除之后恢复初始状态
                loadi = 0;
                succeed = 0;
            }, 1000)
        })
    },
 
    upload: function () {
        console.log($("#types").val());
        var file = $("#file")[0].files[0];  //文件对象
        //判断文件的大小
        if (file.size > parseInt($("#filemax").val()) * 1024 * 1024 * 1024) {
            isload = 6; return alert('您上传的文件超过最大限制！');
        }
        //console.log(file.type);
        //选择文件的文件名
        var filenamete = $("#file")[0].files[0].name;
        //赋值当前文件名
        filenameing = filenamete;
        //截取文件后缀
        var nametype = filenamete.substring(filenamete.lastIndexOf(".") + 1, filenamete.length);
        if ($("#fjm").val() == '' || $("#fjm").val() == undefined) { isload = 6; return alert('请输入文件名再上传！'); }
        name = $("#fjm").val() + '.' + nametype;        //文件名
        var size = file.size;        //总大小
        var shardSize = 2 * 1024 * 1024;   //以2MB为一个分片
        shardCount = Math.ceil(size / shardSize);   //总片数
        var postsaves = function (i) {
            //计算每一片的起始与结束位置
            var start = i * shardSize,
                    end = Math.min(size, start + shardSize);
 
            //构造一个表单，FormData是HTML5新增的
            var form = new FormData();
            form.append("data", file.slice(start, end));  //slice方法用于切出文件的一部分
            form.append("name", name);
            form.append("total", shardCount);   //总片数
            form.append("index", i + 1);        //当前是第几片
            form.append("serverid", $("#server_order").val());
            form.append("userid", $("#userid").val());
            form.append("types", $("#types").val());
            //判断该块是否存在
            var bolr = isExistFile(name + "_" + (i + 1));
            console.log(bolr + '----' + name + "_" + (i + 1) + "-----" + shardCount);
            //判断是否已经上传过该片
            if (bolr == true) {
                ++succeed;
                //传输未完成
                if (isload == 0 && i < shardCount - 1) {
                    //js异步执行该方法
                    requestAnimationFrame(function () {
                        postsaves(i + 1);
                    })
                    $("#output").text('验证进度：' + ((succeed / shardCount) * 100).toFixed(0) + " % " + 100);
                }
            } else {
                try {
                    //Ajax提交
                    $.ajax({
                        url: "Handler/FileUpload.ashx",
                        type: "POST",
                        data: form,
                        async: true,         //异步
                        processData: false,  //很重要，告诉jquery不要对form进行处理
                        contentType: false,  //很重要，指定为false才能形成正确的Content-Type
                        success: function (result) {
                            if (result == '0' || result == '00') {
                                //上传成功时候
                                ++succeed;
                            }
                            if (isload == 0 && i < shardCount - 1) {
                                postsaves(i + 1);
                            }
                            if (isload == 0) {
                                $("#output").text('上传进度：' + ((succeed / shardCount) * 100).toFixed(0) + " % " + 100);
                            }
                            if (result == '00') {
                                alert('上传成功！');
                                loadtable();
                            }
                        }, error: function (result) {
                            if (confirm('网络连接中断！是否重新连接上传？如果不能重新连接！保证网络时点击继续！')) {
                                setTimeout(function () { postsaves(0); }, 2000)
                            } else {
                                isload = 1;
                            }
                        } //error  end 
                    }); //ajax end
                } catch (e) {
                }
            } //if else end
            loadi = loadi + 1;
        };
        //执行上传方法入口
        postsaves(loadi);
    }
};

3.一般处理程序接受分段过来的文件，存放文件的文件夹自建，还有插入数据库步骤方法省略：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using WebApplication1;
 
namespace LY.CIP.Component.VCS.Handler
{
    /// <summary>
    /// FileUpload 的摘要说明
    /// </summary>
    public class FileUpload : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            Rescue rescue = new Rescue();
            context.Response.ContentType = "text/plain";
            try
            {
                if (context.Request.Form["isload"] != null && context.Request.Form["isload"].ToString() == "fly")
                {
                    string filename = context.Request.Form["filename"].ToString();
                    string dir = context.Server.MapPath("~/FileSave");
                    if (File.Exists(dir + "/" + filename))
                        context.Response.Write("1");
 
                }
                else
                    if (context.Request.Form["deletes"] != null && context.Request.Form["deletes"].ToString() == "all")
                    {
                        string filename = context.Request.Form["filename"].ToString();
                        int shardCount = Convert.ToInt32(context.Request.Form["shardCount"].ToString());
                        string dir = context.Server.MapPath("~/FileSave");
                        string uurl = dir + "/" + filename;
                        for (int i = 1; i < shardCount; i++)
                        {
                            try
                            {
                                string uurlnew = uurl + "_" + i;
                                if (File.Exists(uurlnew))
                                {
                                    System.IO.File.SetAttributes(uurlnew, System.IO.FileAttributes.Normal);
                                    File.Delete(uurlnew);
                                }
                            }
                            catch (Exception)
                            {
                            }
                        }
                        context.Response.Write("取消成功！");
                    }
                    else
                    {
 
                        //从Request中取参数，注意上传的文件在Requst.Files中
                        string name = context.Request["name"];
                        int total = Convert.ToInt32(context.Request["total"]);
                        int index = Convert.ToInt32(context.Request["index"]);
                        var data = context.Request.Files["data"];
 
                        //保存一个分片到磁盘上
                        string dir = context.Server.MapPath("~/FileSave");
                        string file = Path.Combine(dir, name + "_" + index);
                        data.SaveAs(file);
                        context.Response.Write("0");
                        //如果已经是最后一个分片，组合
                        if (index == total)
                        {
                           //获取必要参数
                            string serverid = context.Request["serverid"];
                            string userid = context.Request["userid"];
                            string types = context.Request["types"];
 
                            file = Path.Combine(dir, name);
                            var fs = new FileStream(file, FileMode.Create);
                            for (int i = 1; i <= total; ++i)
                            {
                                string part = Path.Combine(dir, name + "_" + i);
                                var bytes = System.IO.File.ReadAllBytes(part);
                                fs.Write(bytes, 0, bytes.Length);
                                bytes = null;
                                System.IO.File.Delete(part);
                            }
                            fs.Close();
                            //截取文件类型
                            string filetype = "";
                            if (name.LastIndexOf(".") == name.Length - 4)
                            {
                                filetype = name.Substring(name.LastIndexOf(".") + 1, 3);
                            }
                            Dictionary<string, object> dic = new Dictionary<string, object>();
                            dic.Add("filenmae", name);
                            dic.Add("filetype", types);
                            dic.Add("filepth", "FileSave/" + name);
                            dic.Add("server_id", serverid);
                            dic.Add("user_id", userid);
                            string reliut =rescue.InsertUploadFileSql(dic);
                            if (reliut != "1")
                            {
                                context.Response.Write("插入数据库失败！");
                            }
                            else {
                                //返回是否成功
                                context.Response.Write("0");
                            }//if else  end
                        }// if end 
                    }// try  end
            }
            catch (Exception)
            {
 
                context.Response.Write("1");
            }
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

4.datatables便利文件信息：

$(function () {
    page.init();
    var datablesd = $("#datablesd");
    var table = '<table id="example" class="display" width="100%" cellspacing="0"> </table>'
    var logr = {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项搜索结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 条附件",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "暂无文件上传",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        }
    };
    var conlius = [
            { "title": "查看", "data": "file_path", "width": "80px", 'sClass': "text-center", render: function (data, type, row) {
                if (row != null) {
                    var file_path = row.FILE_PATH;
                    return '<a href="' + file_path + '">查看</a>';
                }
            }
            },
            { "title": "删除", "data": "name", "width": "80px", 'sClass': "text-center", render: function (data, type, row) {
                if (row != null) {
                    var UPLOAD_FILE_ID = row.UPLOAD_FILE_ID;
                    return '<a href="#" class="mydelete" isid="' + UPLOAD_FILE_ID + '">删除</a>';
                }
            }
            },
            { "title": "文件类型", "width": "180px", 'sClass': "text-right", "data": "LOOKUP_VALUE_NAME" },
            { "title": "文件名称", 'sClass': "text-right", "data": "FILE_NAME" }
        ];
    var databless = function (data) {
        datablesd.html('');
        datablesd.append(table);
        $('#example', datablesd).DataTable({
            data: data,
            "serverSide": true,
            searching: true,
            lengthChange: true,
            paging: true,
            scrollCollapse: true,
            serverSide: false,
            search: true,
            processing: true,
            /* scrollY: 500,   表格的高度限制*/
            scrollX: "100%",
            scrollXInner: "100%",
            scrollCollapse: true,
            jQueryUI: false,
            autoWidth: true,
            autoSearch: false,
            pageLength: 10, //每页条数
            bLengthChange: false, //不显示每页显示条数
            searching: false, //搜索
            language: logr,
            oAria: {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            },
            columns: conlius
        });
        $.each($(".mydelete", datablesd), function (i, e) {
            $(e).off("click")
            $(e).on("click", function () {
 
                var id = $(e).attr("isid")
                console.log(id + "--------");
                $.ajax({
                    type: "post",
                    url: "/FileUpload.aspx/delete",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({ id: id }),
                    dataType: "json",
                    success: function (d) {
                        //0;数据删除失败，1删除成功，2数据删除成功，文件删除失败
                        console.log(d);
                        if (d.d == "0") {
                            alert('删除成功！');
                        }
                        loadtable();
                    },
                    error: function (result) {
                       // alert(result.responseText);
                    }
                }); //ajax end
 
            }); //click  end
 
        }); //each  end
    }
    loadtable = function () {
        //        console.log($("#userid").val());
        //        console.log($("#server_order").val());
        var user_id = $("#userid").val();
        var server_id = $("#server_order").val();
 
        $.ajax({
            type: "post",
            url: "/FileUpload.aspx/SayHello",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({ user_id: user_id, oerder_id: server_id }),
            dataType: "json",
            success: function (ds) {
                var _res;
                if (ds.d == "") {
                    _res = [];
                } else {
                    _res = JSON.parse(ds.d);
                }
                //console.log(_res);
                databless(_res);
            },
            error: function (result) {
                //alert(result.responseText);
            }
        });
    }
 
    loadtable();
});