zoukankan      html  css  js  c++  java
  • 分片上传

    前端

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="/lib/jquery/dist/jquery.js"></script>
        <script>
            var UploadPath = "";
            //开始上传
            function UploadStart() {
                var file = $("#path")[0].files[0];
                AjaxFile(file, 0);
            }
            function AjaxFile(file, i) {
                var name = file.name, //文件名
                    size = file.size, //总大小shardSize = 2 * 1024 * 1024, 
                    shardSize = 2 * 1024 * 1024,//以2MB为一个分片
                    shardCount = Math.ceil(size / shardSize); //总片数
                if (i >= shardCount) {
                    return;
                }
                //计算每一片的起始与结束位置
                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("lastModified", file.lastModified);
                form.append("fileName", name);
                form.append("total", shardCount); //总片数
                form.append("index", i + 1); //当前是第几片
                UploadPath = file.lastModified
                //Ajax提交文件
                $.ajax({
                    url: "/Upload/UploadFile",
                    type: "POST",
                    data: form,
                    async: true, //异步
                    processData: false, //很重要,告诉jquery不要对form进行处理
                    contentType: false, //很重要,指定为false才能形成正确的Content-Type
                    success: function (result) {
                        if (result != null) {
                            i = result.number++;
                            var num = Math.ceil(i * 100 / shardCount);
                            $("#output").text(num + '%');
                            AjaxFile(file, i);
                            if (result.mergeOk) {
                                var filepath = $("#path");
                                filepath.after(filepath.clone().val(""));
                                filepath.remove();//清空input file
                                $('#upfile').val('请选择文件');
                                alert("success!!!");
                            }
                        }
                    }
                });
            }
        </script>
    </head>
    <body>
        <div class="row" style="margin-top:20%">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <input type="text" value="请选择文件" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
                <input type="button" value="浏览" οnclick="path.click()" style="border:1px solid #ccc;background:#fff">
                <input type="file" id="path" style="display:none" multiple="multiple" οnchange="upfile.value=this.value">
                <br />
                <span id="output">0%</span>
                <button type="button" id="file" οnclick="UploadStart()" style="border:1px solid #ccc;background:#fff">开始上传</button>
            </div>
            <div class="col-lg-4"></div>
        </div>
    </body>
    </html>

    后端:

    using Microsoft.AspNetCore.Mvc;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Threading.Tasks;
    
    namespace HUCAI.Core.WebApplication.Controllers
    {
        public class UploadController : Controller
        {
            public IActionResult Index()
            {
                return View();
            }
            [HttpPost]
            public async Task<ActionResult> UploadFile()
            {
                var data = Request.Form.Files["data"];
                string lastModified = Request.Form["lastModified"].ToString();
                var total = Request.Form["total"];
                var fileName = Request.Form["fileName"];
                var index = Request.Form["index"];
    
                string temporary = Path.Combine($"{Directory.GetCurrentDirectory()}/wwwroot/", lastModified);//临时保存分块的目录
                try
                {
                    if (!Directory.Exists(temporary))
                        Directory.CreateDirectory(temporary);
                    string filePath = Path.Combine(temporary, index.ToString());
                    if (!Convert.IsDBNull(data))
                    {
                        await Task.Run(() => {
                            FileStream fs = new FileStream(filePath, FileMode.Create);
                            data.CopyTo(fs);
                        });
                    }
                    bool mergeOk = false;
                    if (total == index)
                    {
                        mergeOk = await FileMerge(lastModified, fileName);
                    }
    
                    Dictionary<string, object> result = new Dictionary<string, object>();
                    result.Add("number", index);
                    result.Add("mergeOk", mergeOk);
                    return Json(result);
    
                }
                catch (Exception ex)
                {
                    Directory.Delete(temporary);//删除文件夹
                    throw ex;
                }
            }
    
            public async Task<bool> FileMerge(string lastModified, string fileName)
            {
                bool ok = false;
                try
                {
                    var temporary = Path.Combine($"{Directory.GetCurrentDirectory()}/wwwroot/", lastModified);//临时文件夹
                    fileName = Request.Form["fileName"];//文件名
                    string fileExt = Path.GetExtension(fileName);//获取文件后缀
                    var files = Directory.GetFiles(temporary);//获得下面的所有文件
                    var finalPath = Path.Combine($"{Directory.GetCurrentDirectory()}/wwwroot/", DateTime.Now.ToString("yyMMddHHmmss") + fileExt);//最终的文件名(demo中保存的是它上传时候的文件名,实际操作肯定不能这样)
                    var fs = new FileStream(finalPath, FileMode.Create);
                    foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x))//排一下序,保证从0-N Write
                    {
                        var bytes = System.IO.File.ReadAllBytes(part);
                        await fs.WriteAsync(bytes, 0, bytes.Length);
                        bytes = null;
                        System.IO.File.Delete(part);//删除分块
                    }
                    fs.Close();
                    Directory.Delete(temporary);//删除文件夹
                    ok = true;
                }
                catch (Exception ex)
                {
                    throw ex;
                }
                return ok;
            }
        }
    }
  • 相关阅读:
    B2C电子商务网站的突围——再议什么是B2C网站,互联网营销 狼人:
    迅雷网站设计浅析,互联网营销 狼人:
    构建一个高性能的网页抓取器,互联网营销 狼人:
    Velocity China 2010大会回顾,互联网营销 狼人:
    尝试使用GraphicsMagick的缩略图功能,互联网营销 狼人:
    美妙的模电2013/4/18
    找素数 素数就是不能再进行等分的整数。比如:7,11。而9不是素数,因为它可以平分为3等份。
    WMI技术介绍和应用——查询硬件信息
    码农如何快速打造一个有设计感的网站 How to Make Your Site Look HalfDecent in Half an Hour
    poj321101背包
  • 原文地址:https://www.cnblogs.com/siyunianhua/p/15339238.html
Copyright © 2011-2022 走看看