zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    js中属性节点的应用
    改变属性的值的方法
    获取所有节点的一些方法的属性(有待改善)
    JS中修改属性
    获取节点的几种小案例
    在页面上点击按钮,出现弹出框
    SelectionSort,选择排序
    BubbleSort冒泡排序
    混合app
    使用(Unicode字符)让inline水平元素换行
  • 原文地址:https://www.cnblogs.com/lizhaoyao/p/10620364.html
Copyright © 2011-2022 走看看