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

<!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. Node爬取简书首页文章

    Node爬取简书首页文章 博主刚学node,打算写个爬虫练练手,这次的爬虫目标是简书的首页文章 流程分析 使用superagent发送http请求到服务端,获取HTML文本 用cheerio解析获得的 ...

  2. 在C#中，Json的序列化和反序列化的几种方式总结 转载

    转载自  https://www.cnblogs.com/caofangsheng/p/5687994.html    谢谢 在这篇文章中,我们将会学到如何使用C#,来序列化对象成为Json格式的数据 ...

  3. JS_高程6.面向对象的程序设计（1）理解对象

    js的数据属性:P139(1)[[Configurable]](2)[[Enumerable]](3)[[Writable]](4)[[Value]] 使用Object.definerPropert( ...

  4. 转 asp.net mvc 身份验证中返回绝对路径的ReturnUrl

    原文:http://www.cnblogs.com/hyl8218/archive/2011/11/22/2259116.html 从HttpUnauthorizedResult的源码可以看出,Htt ...

  5. .Net core下的配置设置（二）——Option

    我在前面的文章.Net core下的配置设置(一)——Configuration中介绍了.net core下配置文件的读取方法,在.net core中,直接从Configuration对象中读取的并不 ...

  6. protobuf语法指南

    遇到proto编译问问,看看proto语法,记录一下 protobuf3 语法指南 http://colobu.com/2017/03/16/Protobuf3-language-guide/ htt ...

  7. Gitlab团队协作流程

    一:加入群组 项目管理员添加用户到群组,赋予权限(owner.developer...). 二:拉取项目,建立分支 通过git clone拉取项目到本地,通过终端打开项目目录,创建自己的分支,并推送到 ...

  8. 使用h5py操作hdf5文件

    HDF(Hierarchical Data Format)指一种为存储和处理大容量科学数据设计的文件格式及相应库文件.HDF 最早由美国国家超级计算应用中心 NCSA 开发,目前在非盈利组织 HDF ...

  9. springboot nginx 配置

    安装nginx参考本人另一篇博客:http://www.cnblogs.com/gmq-sh/p/5750833.html spring-boot需要启动nginx的,用于监听启动的端口.一.配置ng ...

  10. Mathematica绘制曲面交线方法(方法二)

    MeshFunction方式 Show[Graphics3D[{Opacity[0.5], Ball[{0, 0, 0}, 2]}], ParametricPlot3D[{4 + (3 + Cos[v ...