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

<!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. js获取浏览器屏幕的尺寸

    浏览器屏幕尺寸参照表: 如何获取屏幕宽度: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: ...

  2. LinkedList源码分析和实例应用

    1. LinkedList介绍 LinkedList是继承于AbstractSequentialList抽象类,它也可以被当作堆栈.队列或者双端队列使用. LinkedList实现了Deque接口,即 ...

  3. HTTP协议内容1

    一．请求协议(浏览器---àserver) 格式: (1)    请求首行 ://请求方式 请求路径 协议和版本 例如:GET /index.html HTTP/1.1 (2)    请求头信息:// ...

  4. ISDN简记

    简介 ISDN:(Integrated Services Digital Network,综合业务数字网) 是以综合数字电话网(IDN)为基础发展演变而形成的通信网,能够提供端到端的数字连接,用来支持 ...

  5. SharePoint 前端开发常用的对象之_spPageContextInfo

    前言 _spPageContextInfo对象,是SharePoint开发一个非常常用的对象,尤其是前端开发,可以非常方便的获取到一些和站点有关的信息. 完整对象如下图,需要什么属性,可以自己获取,然 ...

  6. iOS：给标签栏控制器的UITabbarItem添加点击动效

    一.介绍 现在很多app,附带很炫的点击效果,让用户享受到非常棒的体验,例如动画.渐变.音效等. 当然,市面上大多数app的标签栏点击还是挺中规中矩的,只是切换图片而已.然而,这个是可以优化的,附带点 ...

  7. 20170711 通过阿里云与国家气象局合作的api读取历史辐照数据

    一.概述     今天收到阿里云推送的试用通知,就迫不及待的申请了一个试用key,开始试用.     初步使用之后发现基本可用,至于最后是否适合商用还要看他的收费情况.           接口的使用 ...

  8. mysql5 数据库连接丢失问题，autoReconnect=true不起作用

    The last packet successfully received from the server was 55,404,563 millise 方案1 定时器 方案2 修改连接池容量 mys ...

  9. Canvas 旋转的图片

    var image = new Image(), counter = 0; image.onload = function () { var CANVAS_WIDTH = 300, CANVAS_HE ...

  10. 【转】关于免费SSL证书的那些事儿

    根据 Let’s Encrypt CA 的统计,截至 2017 年 11 月,Firefox 加载的网页中启用 HTTPS 的比例占 67%,比去年底的 45% 有巨大提升.浏览器开发商如 Mozil ...