js上传

有时候需要显示进度,这时候就需要做一些切割,具体上传代码如下:

复制代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body>
    <input type="file" name="my_big_file" id="my_big_file" />
    <input type="button" value="上传" id="upload_btn" />
    <div id="tip"></div>

    <script type="text/javascript">
        $(function(){
            //页面加载完毕后开始执行的事件
            $("#upload_btn").click(function(){
                if($("#my_big_file").val()=="")
                {
                    console.log("请选择文件");return false;
                }
                var file= document.getElementById("my_big_file").files[0];
                var total_size=file.size;
                var step=1024*1024;
                var num=Math.ceil(total_size/step);
                var has_loaded=0;
                for(var i=0;i<num;i++)
                {
                    has_loaded+=step;
                    //var reader= new FileReader();
                    //reader.readAsBinaryString(file.slice(has_loaded,has_loaded+step));
                    $("#tip").html("当前进度 "+has_loaded/total_size*100+"%");
                    sleep(10);
                    console.log("当前进度 "+has_loaded/total_size*100+"%");
                    //reader.onprogress=function(e){
                        //console.log(this.result);
                        //console.log("当前进度 "+has_loaded/total_size*100+"%");
                    //};
                }
            });
        });
        function sleep(numberMillis) { 
            var now = new Date(); 
            var exitTime = now.getTime() + numberMillis; 
            while (true)
            {
                now = new Date();
                if (now.getTime() > exitTime)
                {
                    return;
                }
            }
        }    
</script>
</body>
</html>
复制代码

 

posted @   李照耀  阅读(731)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2017-03-29 THINKPHP5判断当前浏览器请求方式
2017-03-29 THINKPHP5操作数据库代码示例
2016-03-29 如何写一个简单的鼠标滑动过的二级菜单
2016-03-29 jquery获取节点的时候获取包含自己在内的HTML标签
点击右上角即可分享
微信分享提示