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

<!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. Java 将 List 里面的内容写入桌面的 txt 文档

    文件内容: /** * 将 list 写入文件中 */ import java.io.BufferedWriter; import java.io.File; import java.io.FileW ...

  2. GMA Round 1 双曲线与面积

    传送门 双曲线与面积 P是双曲线$\frac{x^2}{1471^2}-\frac{y^2}{1372^2}=1$上的一个动点,现在过P作一条直线与该双曲线的两条渐近线相交于A.B两点,且|AP|=| ...

  3. Spring Mvc配置多视图 - tiles, velocity, freeMarker, jsp

    <!-- Velocity --> <bean id="velocityViewResolver" class="org.springframework ...

  4. Socket.IO学习之基础入门

    原文:http://blog.csdn.net/weichuang_1/article/details/48831957 这里贴出Socket.IO官网 一.Socket.IO的介绍 Socket.I ...

  5. c++中transform()函数和find()函数的使用方法。

    1.transform函数的使用 transform在指定的范围内应用于给定的操作,并将结果存储在指定的另一个范围内.transform函数包含在<algorithm>头文件中. 以下是s ...

  6. phpStorm中如何不让其自动添加封闭大括号？

    Settings > Editor > General->Smart Keys.

  7. 每天一个linux命令(12):more命令

    1.命令简介 more (more) 该命令一次显示一屏文本,满屏后停下来,并且在屏幕的底部出现一个提示信息,给出至今己显示的该文件的百分比,方便逐页阅读(file perusal filter fo ...

  8. py下windows用户安装lxml

    windows用户在安装lxml可能会因为缺少C语言库报错可以选择到Unofficial Windows Binaries for Python Extension Packages下载whl文件 例 ...

  9. C#之值类型和引用类型

    本文意在巩固基础知识,并不是对其进行深入剖析,还望理解.本文是对此项知识的整理文,有些内容来源于网络,其他为博主原创,所以难免会有一些小得瑕疵,敬请谅解.所有示例均是博主测试过的,如有转载请标明出处, ...

  10. 从MySQL全库备份中恢复某个库和某张表

    在Mysqldump官方工具中,如何只恢复某个库呢? 全库备份 [root@HE1 ~]# mysqldump -uroot -p --single-transaction -A --master-d ...