正文

异步上传，显示进度条

风浪子  2022-02-12  215

关键词：

服务端代码

     [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上传文件显示进度条(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="../js/jquery.js"></script></head><body><h2>HTML5异步上传文件，带进度条(jQuery)</h2><formm 查看详情

异步下载圆形进度条显示进度

圆形进度条参考链接即可：使用css3实现圆形进度条需求点击下载后遮罩层显示下载进度：1.圆形进度条参考以上链接，有点小瑕疵，可更改定位距离实现重合。 2.遮罩层：.lbOverlay{ display:none; position:fixed; left:0; ... 查看详情

使用引导进度条以模态显示上传进度

】使用引导进度条以模态显示上传进度【英文标题】：DisplayUploadProgressinModalwithBootstrapProgressBar【发布时间】：2015-04-2003:01:02【问题描述】：我正在构建一个c#MVC应用程序，它显示一个表单并允许用户上传一些文件。当用户点击提... 查看详情

Retrofit 2 - 如何异步显示进度条？

】Retrofit2-如何异步显示进度条？【英文标题】：Retrofit2-Howshowprogressbarasync?【发布时间】：2016-12-2402:16:38【问题描述】：我在Android中创建新项目时创建了默认登录活动。默认情况下会创建一个progressBar，可以很好地登录并正确显... 查看详情

ios异步下载下载进度条显示

说到http异步下载，首先要知道其中的关键类。关键类是NSURLConnection NSURLRequest NSMutableURLRequest 委托是NSURLConnectionDownloadDelegateNSURLConnectionDataDelegateNSURLConnectionDelegate首先，我们要实现最基本的下载功能。LQ 查看详情

html5jquery+formdata异步上传文件，带进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href=". 查看详情

java示例代码_进度条仅在调试模式下显示。Job plus异步显示

java示例代码_进度条仅在调试模式下显示。Job plus异步显示查看详情

如何在ajax文件上传中显示进度条

】如何在ajax文件上传中显示进度条【英文标题】：Howtoshowprogressbarinajaxfileupload【发布时间】：2013-01-2605:22:52【问题描述】：我的代码发布了ajax请求，但没有显示进度条。请帮助更正代码以显示工作进度条。$(document).ready(function()... 查看详情

uploadifive.js怎么去掉进度条

参考技术AUploadify中上传完毕会默认保留进度条并显示100%，前提设置removeCompleted为false，而UploadiFive中上传完毕后进度条自动消失参考技术BUploadify中上传完毕会默认保留进度条并显示100%，前提设置removeCompleted为false，而UploadiFive... 查看详情

java上传实现百分比的进度条，怎么实现

... 参考技术Bswing？jsp网页？追问jsp网页参考技术C这个需要异步上传支持,搜索一下异步上传查看详情

struts2文件上传进度条显示

参考成功博客：http://blog.sina.com.cn/s/blog_bca9d7e80101bkko.html待测试博客：http://blog.csdn.net/z69183787/article/details/52536255Struts2文件上传进度条显示查看详情

当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？

】当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？【英文标题】：Howtoshowprogressbarbeforefragmentloadingwhenfragmentviewloadingispartofasynctask?【发布时间】：2018-04-1621:50:48【问题描述】：我有一个片段来显示日历... 查看详情

Dropzone.js 上传进度条不显示

】Dropzone.js上传进度条不显示【英文标题】：Dropzone.jsuploadprogressbarnotshowing【发布时间】：2014-05-2003:02:57【问题描述】：我正在使用Dropzone.js进行文件上传，它运行良好，只是没有出现进度条。没有错误。我在网站的前端使用Bootst... 查看详情

javaftp上传文件（进度条显示进度）

<spanstyle="font-family:Arial,Helvetica,sans-serif;background-color:rgb(255,255,255);">java实现FTP上传有2种方式，一种是org.apache.commons.net.ftp.FTPClient这个jar包，一种是sun.net.ftp.Ftp 查看详情

javaftp上传文件（进度条显示进度）

文件上传和进度条

】文件上传和进度条【英文标题】：Fileuploadandprogessbar【发布时间】：2013-01-2114:01:05【问题描述】：我想在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但... 查看详情

如何在 Django 中上传文件并显示进度条？

】如何在Django中上传文件并显示进度条？【英文标题】：HowtouploadafileandshowprogressbarinDjango?【发布时间】：2011-07-0117:28:33【问题描述】：我已经编写了在Django中上传文件的代码，如下所示：defupload(request):ifrequest.method==\'POST\':form=Up... 查看详情