大文件分片上传及进度展示

一、最简单的表单提交方式

通过页面表单提交的方式，上传附件，页面会刷新，可以借助iframe标签实现局部刷新的效果，这里不具体展开。直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单文件上传</title>
</head>
<body>
    <h1>form表单上传</h1>
    <form method="post" action="/simple/upload" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="上传">
    </form>
</body>
</html>

package com.badcat.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.util.Date;

/**
 * @author ：badcat
 * @date ：Created in 2022/6/25 17:11
 * @description ：
 */
@RestController
@RequestMapping("/simple")
public class SimpleController {

    private final String path = "D:\\study\\project\\2022study\\gitee\\file_upload\\simple";

    @PostMapping("/upload")
    public String uploadSimple(@RequestParam("file") MultipartFile file) throws Exception{
        String contentType = file.getContentType();
        String name = file.getName();
        String originalFilename = file.getOriginalFilename();
        System.err.println(contentType);
        System.err.println(name);
        System.err.println(originalFilename);

        File fileDirectory = new File(path);
        if (!fileDirectory.exists()){
            fileDirectory.mkdirs();
        }

        file.transferTo(new File(path + "\\" + new Date().getTime() + "_" + originalFilename));

        return "ok";
    }

效果展示

二、ajax异步提交方式

ajax请求配合formData，实现异步文件上传，页面不会整体刷新。上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formData上传</title>
</head>
<body>
    <h1>formData 上传</h1>
    <input id="file" type="file" value="请选择文件">
    <input type="button" value="上传" onclick="upload();">
    <script src="jquery.min.js"></script>
    <script>

        function upload(){

            debugger;
            var myFile = $("#file")[0].files[0];
            var formData = new FormData();
            formData.append("file", myFile);
            $.ajax({
                type: "POST",
                url: '/formData/upload',
                data: formData,
                contentType: false, //必须
                processData: false, //必须
                //dataType: "json",
                success: function(res){
                    console.log("success");
                    console.log(res);
                    //清空上传文件的值
                    $('#file').val('');
                    //$('#success_image').attr('src', res.realPathList[0]);
                },
                error : function(res) {
                    console.log("error");
                    console.log(res);
                    //清空上传文件的值
                    //$('#btn1').val('');
                }
            })
        }
    </script>
</body>
</html>

package com.badcat.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.util.Date;

/**
 * @author ：badcat
 * @date ：Created in 2022/6/25 17:11
 * @description ：
 */
@RestController
@RequestMapping("/formData")
public class FormDataController {

    private final String path = "D:\\study\\project\\2022study\\gitee\\file_upload\\formData";

    @PostMapping("/upload")
    public String upload(MultipartFile file) throws Exception{
        String contentType = file.getContentType();
        String name = file.getName();
        String originalFilename = file.getOriginalFilename();
        System.err.println(contentType);
        System.err.println(name);
        System.err.println(originalFilename);

        File fileDirectory = new File(path);
        if (!fileDirectory.exists()){
            fileDirectory.mkdirs();
        }

        file.transferTo(new File(path + "\\" + new Date().getTime() + "_" + originalFilename));

        return "ok";
    }
}

效果展示

三、ajax异步提交方式 + 上传进度展示

上传进度可以通过XMLHttpRequest对象添加监听事件来获取上传进度，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formData上传 + 上传进度</title>
    <style>
        #progress{
            display: none;
        }
        .outer{
            background-color: darkgray;
            height: 12px;
            width: 300px;
            float: left;
        }
        .inner{
            background-color: green;
            height: 12px;
            width: 0;
        }
        .rate{
            font-size: 12px;
            float: left;
        }
    </style>
</head>
<body>
    <h1>formData上传 + 上传进度</h1>
    <input id="file" type="file" value="请选择文件" onchange="fileChange();">
    <input type="button" value="上传" onclick="upload();">
    <div id="progress">
        <div class="outer">
            <div class="inner"></div>
        </div>
        <span class="rate"></span>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            //alert(1);
        })

        function fileChange(){
            $("#progress").hide();
            $(".inner").css("width", 0);
        }

        function upload(){

            //debugger;
            var myFile = $("#file")[0].files[0];
            var formData = new FormData();
            formData.append("file", myFile);
            $.ajax({
                type: "POST",
                url: '/formDataProgress/upload',
                data: formData,
                contentType: false, //必须
                processData: false, //必须
                //dataType: "json",
                xhr: function(){

                    $("#progress").show();

                    let xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener('progress', function (e) {
                        let loaded = e.loaded;
                        let total = e.total;
                        var rate = (loaded/total) * 100;
                        console.log(e, '上传', rate + '%');
                        $(".inner").css("width", loaded / total * 300 + "px" );
                        $(".rate").html(Math.floor(rate) + '%');
                    })

                    return xhr;
                },
                success: function(res){

                    console.log("success");
                    console.log(res);
                    alert("上传完成")
                    //清空上传文件的值
                    $('#file').val('');
                    $("#progress").html("");
                    //$('#success_image').attr('src', res.realPathList[0]);
                },
                error : function(res) {
                    console.log("error");
                    console.log(res);
                    //清空上传文件的值
                    //$('#btn1').val('');
                }
            })
        }
    </script>
</body>
</html>

package com.badcat.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.util.Date;

/**
 * @author ：badcat
 * @date ：Created in 2022/6/25 17:11
 * @description ：
 */
@RestController
@RequestMapping("/formDataProgress")
public class FormDataProgressController {

    private final String path = "D:\\study\\project\\2022study\\gitee\\file_upload\\formDataProgress";

    @PostMapping("/upload")
    public String upload(MultipartFile file) throws Exception{
        String contentType = file.getContentType();
        String name = file.getName();
        String originalFilename = file.getOriginalFilename();
        System.err.println(contentType);
        System.err.println(name);
        System.err.println(originalFilename);

        File fileDirectory = new File(path);
        if (!fileDirectory.exists()){
            fileDirectory.mkdirs();
        }

        file.transferTo(new File(path + "\\" + new Date().getTime() + "_" + originalFilename));

        return "ok";
    }

效果展示，说明一下，为了能看出进度，我将浏览器的网速设为3G，否则上传太快看不出效果。

四、ajax异步提交方式 + 大文件分片上传

前边三步只能算热身运动，从部分开始进入正文。
如果上传文件过大的话，会上传失败，原因可能是：1、后端应用限制了上传文件的最大字节数，超过会报错；2、后端应用没有限制最大字节数，应用直接内存溢出了。
那么如何上传大文件呢？分如下几步：1、将文件分片，例如分割成多个文件，每个文件1M大小；2、将每片文件分别上传到后端服务；3、传输完毕后，后端将多片文件拼接起来；
以上三步又引出如下要点：1、前端如何将文件分片；2、后端如何保存多片文件，方便以后拼接；3、如何拼接，如何知道拼接的顺序；
挨个解答：

1、前端如何将文件分片

使用slice(start, end)方法，可以将文件拆分；

2、后端如何保存多片文件，方便以后拼接

给拆分出的多片文件设置一个fileKey，标记是同一个文件拆分出来的，后端将每片文件保存，每片文件名带有fileKey，以便后续拼接。

3、如何拼接，如何知道拼接的顺序

上传每片文件时，将文件索引一并上传给后端，这样后端就能对每片文件按顺序命名，索引为0的分片，命名为原文件名，索引为1的命名为原文件名+".tmp1"，以此类推。这样前端收到每片都已上传完成的结果后，再调用拼接方法，传递fileKey，后端拼接方法根据fileKey拿到所有相关联的分片，再按照索引号，依次将内容追加到没有".tmp"后缀的文件中。
思路清晰了，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formData上传 + 上传进度</title>
</head>
<body>
    <h1>formData上传 + 大文件分片</h1>
    <input id="file" type="file" value="请选择文件" onchange="fileChange();">
    <input type="button" value="上传" onclick="upload();">
    <script src="jquery.min.js"></script>
    <script>

        let totalSize = 0;
        var arr = [];
        var uploadCheckInterval;
        var fileKey;

        $(function(){
            //alert(1);
        })

        function fileChange(){
            $("#progress").hide();
            $(".inner").css("width", 0);
        }

        function upload(){

            //debugger;
            arr = [];
            var myFile = $("#file")[0].files[0];

            const LENGTH = 1024 * 1024 * 1; //每片1M
            let chunks = slice(myFile, LENGTH); // 首先拆分切片

            totalSize = myFile.size;

            fileKey = new Date().getTime();

            for(var i = 0; i < chunks.length; i++){
                var formData = new FormData();
                formData.append("file", chunks[i]);
                formData.append("fileKey", fileKey);
                formData.append("fileName", myFile.name);
                formData.append("fileIndex", i);
                $.ajax({
                    type: "POST",
                    url: '/formDataPiece/upload',
                    data: formData,
                    contentType: false, //必须
                    processData: false, //必须
                    //dataType: "json",
                    success: function(res){

                        console.log("success");
                        console.log(res);
                        var fileIndex = res.fileIndex;
                        var fileSize = res.fileSize;
                        arr[fileIndex] = fileSize;
                        //清空上传文件的值
                        //$('#file').val('');
                        //$('#success_image').attr('src', res.realPathList[0]);
                    },
                    error : function(res) {
                        console.log("error");
                        console.log(res);
                        //清空上传文件的值
                        $('#file').val('');
                    }
                })
            }

            uploadCheckInterval = self.setInterval("uploadCheck()",1000);
        }

        function slice(file, piece = 1024 * 1024 * 5) {

            let totalSize = file.size; // 文件总大小

            let start = 0; // 每次上传的开始字节

            let end = start + piece; // 每次上传的结尾字节

            let chunks = []

            while (start < totalSize) {

                // 根据长度截取每次需要上传的数据

                // File对象继承自Blob对象，因此包含slice方法

                let blob = file.slice(start, end);

                chunks.push(blob)

                start = end;

                end = start + piece;

            }

            return chunks

        }

        function uploadCheck() {
            var sum = 0;
            for (var i = 0; i < arr.length; i++){
                sum += arr[i];
            }

            if(sum === totalSize){
                clearInterval(uploadCheckInterval);
                $.post("/formDataPiece/mergeFile",
                    {
                        "fileKey": fileKey
                    }, function (res) {
                        console.log(res);
                        alert("上传完毕");
                        $('#file').val('');
                    })
            }
        }
    </script>
</body>
</html>

package com.badcat.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.FilenameFilter;
import java.util.HashMap;
import java.util.Map;

/**
 * @author ：badcat
 * @date ：Created in 2022/6/25 17:11
 * @description ：
 */
@RestController
@RequestMapping("/formDataPiece")
public class FormDataPieceController {

    private final String path = "D:\\study\\project\\2022study\\gitee\\file_upload\\formDataPiece";

    @PostMapping("/upload")
    public Map<String, Object> upload(MultipartFile file, String fileKey, String fileName, Integer fileIndex) throws Exception{
        String contentType = file.getContentType();
        String name = file.getName();
        String originalFilename = file.getOriginalFilename();
        System.err.println(contentType);
        System.err.println(name);
        System.err.println(originalFilename);


        File fileDirectory = new File(path);
        if (!fileDirectory.exists()){
            fileDirectory.mkdirs();
        }

        if(fileIndex == 0){
            file.transferTo(new File(path + "\\" + fileKey + "_" + fileName));
        } else {
            file.transferTo(new File(path + "\\" + fileKey + "_" + fileName + ".tmp" + fileIndex));
        }

        Map<String, Object> map = new HashMap<>();
        map.put("fileIndex", fileIndex);
        map.put("fileSize", file.getSize());
        return map;
    }

    @PostMapping("/mergeFile")
    public String mergeFile(String fileKey) throws Exception{
        File fileDirectory = new File(path);
        File[] files = fileDirectory.listFiles(new FilenameFilter() {
            @Override
            public boolean accept(File dir, String name) {
                return name.startsWith(fileKey);
            }
        });

        File realFile = null;

        for (int i = 0; i < files.length; i++){
            File file = files[i];
            String name = file.getName();
            if(name.startsWith(fileKey) && !name.endsWith(".tmp" + i)){
                realFile = file;
                break;
            }
        }

        for (int j = 0; j < files.length; j++){
            for (int i = 0; i < files.length; i++){
                File file = files[i];
                String name = file.getName();
                if (name.startsWith(fileKey) && name.endsWith(".tmp" + j)){
                    FileInputStream fileInputStream = new FileInputStream(file);
                    FileOutputStream fileOutputStream = new FileOutputStream(realFile, true);
                    byte[] bytes = new byte[1024];
                    int b;
                    while ((b = fileInputStream.read(bytes)) != -1){
                        fileOutputStream.write(bytes, 0, b);
                    }

                    fileInputStream.close();
                    fileOutputStream.close();

                    file.delete();
                    break;
                }
            }
        }

        return "ok";
    }

效果展示，拼接方法上我打上断点，为的是看看拼接方法前，分片文件是如何保存的

五、ajax异步提交方式 + 发文件分片上传 + 上传进度展示

在第四步的基础上，如何添加上传进度呢？其实跟单文件进度的方式类似，不罗嗦了，直接上代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formData上传 + 大文件分片 + 上传进度</title>
    <style>
        #progress{
            display: none;
        }
        .outer{
            background-color: darkgray;
            height: 12px;
            width: 300px;
            float: left;
        }
        .inner{
            background-color: green;
            height: 12px;
            width: 0;
        }
        .rate{
            font-size: 12px;
            float: left;
        }
    </style>
</head>
<body>
    <h1>formData上传 + 上传进度</h1>
    <input id="file" type="file" value="请选择文件" onchange="fileChange();">
    <input type="button" value="上传" onclick="upload();">
    <div id="progress">
        <!--<div class="outer">
            <div class="inner"></div>
        </div>
        <span class="rate"></span>-->
    </div>
    <script src="jquery.min.js"></script>
    <script>

        let totalSize = 0;
        var arr = [];
        var uploadCheckInterval;
        var fileKey;

        $(function(){
            //alert(1);
        })

        function fileChange(){
            $("#progress").hide();
            $(".inner").css("width", 0);
        }

        function upload(){

            //debugger;
            arr = [];
            var myFile = $("#file")[0].files[0];

            const LENGTH = 1024 * 1024 * 1; //每片1M
            let chunks = slice(myFile, LENGTH); // 首先拆分切片

            totalSize = myFile.size;

            fileKey = new Date().getTime();

            for(var i = 0; i < chunks.length; i++){
                var formData = new FormData();
                formData.append("file", chunks[i]);
                formData.append("fileKey", fileKey);
                formData.append("fileName", myFile.name);
                formData.append("fileIndex", i);
                var str = "";
                str += `<div id="`+ `outer` + i +`" class="outer">
                                <div id="`+ `inner` + i +`" class="inner"></div>
                            </div>
                            <span id="`+ `rate` + i +`" class="rate">0%</span>
                            <div style="clear: left"></div>`;
                $("#progress").append(str);
                $.ajax({
                    type: "POST",
                    url: '/formDataProgressPiece/upload',
                    data: formData,
                    contentType: false, //必须
                    processData: false, //必须
                    //dataType: "json",
                    xhr: function(){
                        var ii = i;
                        $("#progress").show();

                        let xhr = new XMLHttpRequest();

                        xhr.upload.addEventListener('progress', function (e) {
                            let loaded = e.loaded;
                            let total = e.total;
                            var rate = (loaded/total) * 100;
                            console.log(e, '上传', rate + '%', ii);
                            $("#inner"+ii).css("width", loaded / total * 300 + "px" );
                            $("#rate"+ii).html(Math.floor(rate) + '%');
                        })

                        return xhr;
                    },
                    success: function(res){

                        // console.log("success");
                        // console.log(res);
                        var fileIndex = res.fileIndex;
                        var fileSize = res.fileSize;
                        arr[fileIndex] = fileSize;
                        //清空上传文件的值
                        // $('#file').val('');
                        //$('#success_image').attr('src', res.realPathList[0]);
                    },
                    error : function(res) {
                        // console.log("error");
                        // console.log(res);
                        //清空上传文件的值
                        //$('#file').val('');
                    }
                })
            }

            uploadCheckInterval = self.setInterval("uploadCheck()",1000);
        }

        function slice(file, piece = 1024 * 1024 * 5) {

            let totalSize = file.size; // 文件总大小

            let start = 0; // 每次上传的开始字节

            let end = start + piece; // 每次上传的结尾字节

            let chunks = []

            while (start < totalSize) {

                // 根据长度截取每次需要上传的数据

                // File对象继承自Blob对象，因此包含slice方法

                let blob = file.slice(start, end);

                chunks.push(blob)

                start = end;

                end = start + piece;

            }

            return chunks

        }

        function uploadCheck() {
            var sum = 0;
            for (var i = 0; i < arr.length; i++){
                sum += arr[i];
            }

            if(sum === totalSize){
                clearInterval(uploadCheckInterval);
                $.post("/formDataProgressPiece/mergeFile",
                    {
                        "fileKey": fileKey
                    }, function (res) {
                        console.log(res);
                        alert("上传完毕");
                        $("#progress").html("");
                        $('#file').val('');
                    })
            }
        }
    </script>
</body>
</html>

package com.badcat.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.FilenameFilter;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @author ：badcat
 * @date ：Created in 2022/6/25 17:11
 * @description ：
 */
@RestController
@RequestMapping("/formDataProgressPiece")
public class FormDataProgressPieceController {

    private final String path = "D:\\study\\project\\2022study\\gitee\\file_upload\\formDataProgressPiece";

    @PostMapping("/upload")
    public Map<String, Object> upload(MultipartFile file, String fileKey, String fileName, Integer fileIndex) throws Exception{
        String contentType = file.getContentType();
        String name = file.getName();
        String originalFilename = file.getOriginalFilename();
        System.err.println(contentType);
        System.err.println(name);
        System.err.println(originalFilename);


        File fileDirectory = new File(path);
        if (!fileDirectory.exists()){
            fileDirectory.mkdirs();
        }

        if(fileIndex == 0){
            file.transferTo(new File(path + "\\" + fileKey + "_" + fileName));
        } else {
            file.transferTo(new File(path + "\\" + fileKey + "_" + fileName + ".tmp" + fileIndex));
        }

        Map<String, Object> map = new HashMap<>();
        map.put("fileIndex", fileIndex);
        map.put("fileSize", file.getSize());
        return map;
    }

    @PostMapping("/mergeFile")
    public String mergeFile(String fileKey) throws Exception{
        File fileDirectory = new File(path);
        File[] files = fileDirectory.listFiles(new FilenameFilter() {
            @Override
            public boolean accept(File dir, String name) {
                return name.startsWith(fileKey);
            }
        });

        File realFile = null;

        for (int i = 0; i < files.length; i++){
            File file = files[i];
            String name = file.getName();
            if(name.startsWith(fileKey) && !name.endsWith(".tmp" + i)){
                realFile = file;
                break;
            }
        }

        for (int j = 0; j < files.length; j++){
            for (int i = 0; i < files.length; i++){
                File file = files[i];
                String name = file.getName();
                if (name.startsWith(fileKey) && name.endsWith(".tmp" + j)){
                    FileInputStream fileInputStream = new FileInputStream(file);
                    FileOutputStream fileOutputStream = new FileOutputStream(realFile, true);
                    byte[] bytes = new byte[1024];
                    int b;
                    while ((b = fileInputStream.read(bytes)) != -1){
                        fileOutputStream.write(bytes, 0, b);
                    }

                    fileInputStream.close();
                    fileOutputStream.close();

                    file.delete();
                    break;
                }
            }
        }

        return "ok";
    }

展示效果，同样，为了看出进度效果，我将网络调成3G

再来看个更大的

发现了奇怪的现象，为什么是6个6个的上传？是因为浏览器同一会话中最大并发请求数是6个。
以上实现的是现实每个分片的上传进度，如果像实现总文件的上传进度也很简单，各位可以自行实现。

最后编辑于：2022.06.30 10:17:38

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,525评论 6赞 507
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,203评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,862评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,728评论 1赞 294
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,743评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,590评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,330评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,244评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,693评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,885评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,001评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,723评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,343评论 3赞 330
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,919评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,042评论 1赞 270
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,191评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,955评论 2赞 355

大文件分片上传及进度展示

大文件分片上传及进度展示

目录

本文按以上5个步骤，循序渐进的实现大文件分片上传及进度展示的效果。

一、最简单的表单提交方式

效果展示

二、ajax异步提交方式

效果展示

三、ajax异步提交方式 + 上传进度展示

效果展示，说明一下，为了能看出进度，我将浏览器的网速设为3G，否则上传太快看不出效果。

四、ajax异步提交方式 + 大文件分片上传

1、前端如何将文件分片

2、后端如何保存多片文件，方便以后拼接

3、如何拼接，如何知道拼接的顺序

效果展示，拼接方法上我打上断点，为的是看看拼接方法前，分片文件是如何保存的

五、ajax异步提交方式 + 发文件分片上传 + 上传进度展示

展示效果，同样，为了看出进度效果，我将网络调成3G

再来看个更大的

推荐阅读更多精彩内容