js上傳

時間 2019-11-06

原文原文鏈接

有時候須要顯示進度，這時候就須要作一些切割，具體上傳代碼以下：javascript

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。