异步上传，显示进度条

Posted 2020-06-27 风浪子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了异步上传，显示进度条相关的知识，希望对你有一定的参考价值。

服务端代码

     [HttpPost]
        public ActionResult DoLoad(HttpPostedFileBase upimage, string test)
        {
            string filePhysicalPath = Server.MapPath("~/Upload/" + test);
            if (System.IO.File.Exists(filePhysicalPath))
            {
                System.IO.Stream uploadStream = upimage.InputStream;
                System.IO.FileStream srtv = new System.IO.FileStream(filePhysicalPath, System.IO.FileMode.Append);
                int bufferLen = 1024;
                byte[] buffer = new byte[bufferLen];
                int contentLen = 0; 

                while ((contentLen = uploadStream.Read(buffer, 0, bufferLen)) != 0)
                {
                    srtv.Write(buffer, 0, bufferLen);
                    srtv.Flush();
                }
                srtv.Close(); 
                uploadStream.Close();  
            }
            else
            {
                upimage.SaveAs(filePhysicalPath);
            }
            //string filename = System.IO.Path.GetFileName(upimage.FileName);           
            return Content("上传成功");
        }

web

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>分割大文件上传</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        #test {
            width: 200px;
            height: 100px;
            border: 1px solid green;
            display: none;
        }

        #img {
            width: 50px;
            height: 50px;
            display: none;
        }

        #upimg {
            text-align: center;
            font: 8px/10px ‘微软雅黑‘,‘黑体‘,sans-serif;
            width: 300px;
            height: 10px;
            border: 1px solid green;
        }

        #load {
            width: 0%;
            height: 100%;
            background: green;
            text-align: center;
        }
    </style>
</head>
<body>
    <form enctype="multipart/form-data" action="UpLoad/DoLoad" method="post">
        <!--
        <input type="file" name="pic" />
        <div id="img"></div>
        <input type="button" value="uploadimg" onclick="upimg();" /><br />
        -->
        <div id="upimg">
            <div id="load"></div>
        </div>
        <input type="file" name="upimage" multiple="multiple" />
        <input type="button" value="uploadfile" onclick="upfile();" />
        <input type="submit" value="submit" />
    </form>
    <div id="test">
        测试是否DIV消失
    </div>
    <script type="text/javascript">
        var dom = document.getElementsByTagName(‘form‘)[0];
        dom.onsubmit = function () {
            //return false;
        }
        var xhr = new XMLHttpRequest();
        var fd;
        var des = document.getElementById(‘load‘);
        var num = document.getElementById(‘upimg‘);
        var file;
        const LENGTH = 1 * 1024 * 1024;
        var start;
        var end;
        var blob;
        var pecent;
        var filename;
        //var pending;
        //var clock;
        function upfile() {
            start = 0;
            end = LENGTH + start;
            //pending=false;

            file = document.getElementsByName(‘upimage‘)[0].files[0];
            //filename = file.name;
            if (!file) {
                alert(‘请选择文件‘);
                return;
            }
            //clock=setInterval(‘up()‘,1000);
            up();

        }

        function up() {
            /*
            if(pending){
             return;
            }
            */
            if (start < file.size) {
                xhr.open(‘POST‘, ‘../UpLoad/DoLoad‘, true);
                //xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status >= 200 && this.status < 300) {
                            if (this.responseText.indexOf(‘failed‘) >= 0) {
                                //alert(this.responseText);
                                alert(‘文件发送失败，请重新发送‘);
                                des.style.width = ‘0%‘;
                                //num.innerHTML=‘‘;
                                //clearInterval(clock);
                            } else {
                                //alert(this.responseText)
                                // pending=false;
                                start = end;
                                end = start + LENGTH;
                                setTimeout(‘up()‘, 1000);
                            }

                        }
                    }
                }
                xhr.upload.onprogress = function (ev) {
                    if (ev.lengthComputable) {
                        pecent = 100 * (ev.loaded + start) / file.size;
                        if (pecent > 100) {
                            pecent = 100;
                        }
                        //num.innerHTML=parseInt(pecent)+‘%‘;
                        des.style.width = pecent + ‘%‘;
                        des.innerHTML = parseInt(pecent) + ‘%‘
                    }
                }

                //分割文件核心部分slice
                blob = file.slice(start, end);
                fd = new FormData();
                fd.append(‘upimage‘, blob);
                fd.append(‘test‘, file.name);
                //console.log(fd);
                //pending=true;
                xhr.send(fd);
            } else {
                //clearInterval(clock);
            }
        }

        function change() {
            des.style.width = ‘0%‘;
        }

    </script>
</body>
</html>

以上是关于异步上传，显示进度条的主要内容，如果未能解决你的问题，请参考以下文章

异步上传文件，jquery+ajax，显示进度条

异步上传文件（jquery.form）+进度条+上传到ftp服务器