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

<!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. .net异常机制

    异常机制简介 当CPU运行到一些非法的指令,例如除零错误,访问内存页失败等指令,CPU会生成一个硬件异常,不同的异常有固定的异常代码作为标识符,异常产生以后CPU暂时不能继续执行后续的指令—因为后续的 ...

  2. windows下安装和配置redis

    1.windows下安装和配置redis 1.1 下载: 官网(linux下载地址):https://redis.io/ Windows系统下载地址:https://github.com/MSOpen ...

  3. 逻辑回归与神经网络还有Softmax regression的关系与区别

    本文讨论的关键词:Logistic Regression(逻辑回归).Neural Networks(神经网络) 之前在学习LR和NN的时候,一直对它们独立学习思考,就简单当做是机器学习中的两个不同的 ...

  4. 大数据hadoop生态圈

    大数据本身是个很宽泛的概念,Hadoop生态圈(或者泛生态圈)基本上都是为了处理超过单机尺度的数据处理而诞生的.你可以把它比作一个厨房所以需要的各种工具.锅碗瓢盆,各有各的用处,互相之间又有重合.你可 ...

  5. Filter(1)—基础知识

    一.过滤器(Filter) 1.概述: JavaWeb的一个重要组件,可以对请求和响应拦截 Filter的基本功能是对Servlet容器调用Servlet过程中进行拦截,从而在Servlet进行响应处 ...

  6. line-height 设置为 1

    https://stackoverflow.com/questions/1000398/what-is-line-height1   If no unit is supplied e.g. " ...

  7. Javascript数组(一)排序

    一.简介首先,我们来看一下JS中sort()和reverse()这两个函数的函数吧reverse();这个函数是用来进行倒序,这个没有什么可说的,所谓倒序就是大的在前面,小的在后面. 比如: var ...

  8. VuePress

    VuePress 这篇文章主要是记录自己在使用VuePress过程中所遇到的问题以及如何一步一步的解决问题. 安装vuepress前,请确保你的 Node.js 版本 >= 8 全局安装 # 安 ...

  9. 浪院长 | spark streaming的使用心得

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/rlnLo2pNEfx9c/article/details/82505159 今天.主要想聊聊spar ...

  10. window系统命令行设置proxy----Setting a proxy for Windows using the command-line

    设置代理, bypass-list的参数是不走代理地址: netsh winhttp set proxy proxy-server="socks=localhost:9090" b ...