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

<!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上传的更多相关文章

  1. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  2. js 上传文件后缀名的判断 var flag=false;应用

    js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  3. js 上传下载(留着备用)

      js 上传下载(留着备用) 下载文件 1. <a href="#" onClick="download()">下载文件</a>  & ...

  4. js上传插件uploadify自动检测不到flash控件的问题

    [问题描述] 项目开发中,由于使用了js的一个上传插件uploadify,下载的是flash版本的,后来在谷歌浏览器上运行时经常报flash控件未安装,虽然下图是uploadify自动检测自动弹出来的 ...

  5. js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  6. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  7. 百度Fex webuploader.js上传大文件失败

    项目上用百度webuploader.js上传文件,option选项里面已经设置单个文件大小,但是上传低于此阈值的文件时仍然不成功. 我现在的理解是,框架是将文件post到后台服务器端的.. 百度发现是 ...

  8. 【原】ajaxupload.js上传报错处理方法

    相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.cod ...

  9. java jfinal + ajaxfileupload.js 上传

    功能上传 需求:同时上传多张图片 前端:jquery.ajaxfileupload.js 后端:jfinal upload.htm <html> <body> <div ...

  10. 前端js上传文件 到后端接收文件

    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...

随机推荐

  1. Yii2 数据库sql查询

    Yii2.0 对数据库 查询的一些简单的操作 User::find()->all(); //返回所有数据: User::findOne($id); //返回 主键 id=1 的一条数据(举个例子 ...

  2. PHP读写Excel

    PHP读写Excel PHP读写Excel可以通过第三方库phpexcel比较优雅地完成,由于PHP对于字符串处理的优势,读写PHP非常方便. 库导入 这里使用composer包管理工具,以下是配置信 ...

  3. Python中将array类型不按科学计数法存在文件中的方法

    直接上代码: from numpy import *import numpy as npDrug_array = zeros((708,708),dtype = int)f = open('D:\ma ...

  4. 第三届山西省赛1004 一道大水题（scanf）

    一道大水题 时间限制: C/C++ 2000ms; Java 4000ms 内存限制: 65535KB 通过次数: 44 总提交次数: 1020 问题描述 Dr. Pan作为上兰帝国ACM的总负责人, ...

  5. MUI学习02-顶部导航栏

    建议:先看一下MUI注意事项 连接:http://ask.dcloud.net.cn/article/122 固定栏靠前 所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元 ...

  6. Keras/Tensorflow选择GPU/CPU运行

    首先,导入os,再按照PCI_BUS_ID顺序,从0开始排列GPU, import os os.environ["CUDA_DEVICE_ORDER"] = "PCI_B ...

  7. 在windows命令行批量ping局域网内IP

    参考了博客园Alfred Zhao的文章<Windows平台ping测试局域网所有在用IP> 在cmd命令行运行如下命令即可: ,,) -w .%i | find "回复&quo ...

  8. CAP二十年：“规则”变了

    本文是原文https://www.cnblogs.com/cobbliu/p/7494961.html的译文,原链接:http://www.infoq.com/cn/articles/cap-twel ...

  9. 转：关于S参数的一些理解

    关于S参数的一些理解 http://rf.eefocus.com/module/forum/thread-596241-1-1.html 台湾工程师图文独特讲解:S参数http://rf.eefocu ...

  10. CDC在sql server 2017中无法使用的问题

    Symptom === sp_MScdc_capture_job in the CDC job raised error message Msg 217, Level 16, State 1, Pro ...