JS原生上传大文件显示进度条-php上传文件

在php.ini修改需要的大小：

upload_max_filesize = 8M    
post_max_size = 10M    
memory_limit = 20M

<!DOCTYPE html>
<html>
<head>
    <title>原生JS大文件显示进度条</title>
    <meta charset="UTF-8">
    <style type="text/css">
        #parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px}
        #child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px}
    </style>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <form action="" method="post">
        <div id="parent">
            <div id="child"></div>
        </div>
        <p>上传文件:<input type="file" name="file"></p>    
        <p><input type="submit" value="提交" id="submit"></p>
    </form>
    <script type="text/javascript">
        var oForm = document.getElementsByTagName('form')[0];
        var oSubmit = $('submit');
        //如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响
        oSubmit.onclick = function(){
            try{
                var xhr = new XMLHttpRequest();
            }catch(e){
                var xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            xhr.upload.onprogress = function(e){
                var ev = e || window.event;
                var percent = Math.floor((ev.loaded / ev.total)*100);        
                // console.log(percent);
                //将百分比显示到进度条
                $('parent').style.display = 'block';
                $('child').style.display = 'block';
                //将上传进度的百分比显示到child里面
                $('child').style.width = percent+'%';
                $('child').style.textAlign = 'center';
                $('child').innerHTML = percent+'%';
                //判断如果百分比到达100%时候，隐藏掉
                if(percent==100){
                    $('parent').style.display = 'none';
                    $('child').style.display = 'none';
                }
            }
            xhr.open('post','progress.php',true);
            var form = new FormData(oForm);
            xhr.send(form);
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status==200){
                    eval("var obj ="+xhr.responseText);
                    if(obj.status){
                        alert('上传成功');
                    }else{
                        alert('上传失败');
                    }
                }
            }
            //阻止表单提交
            return false;
        }
    </script>
</body>
</html>
<?php
    //开始上传
    //注意：文件是windows系统的文件，采用的gbk编码，php文件使用的是utf-8编码
    //我们不能直接修改文件的编码，只能临时修改一下php的编码
    $dst_file = $_FILES['file']['name'];
    $dst_file = iconv('utf-8', 'gbk', $dst_file);
    if(move_uploaded_file($_FILES['file']['tmp_name'],$dst_file)){
        $data['status'] = 1;
    }else{
        $data['status'] = 0;
    }
    echo json_encode($data);

DEMO下载地址：https://dwz.cn/fgXtRtnu

JS原生上传大文件显示进度条-php上传文件的更多相关文章

  1. VC下载文件显示进度条

    VC下载文件显示进度条 逗比汪星人2009-09-18上传   by Koma http://blog.csd.net/wangningyu http://download.csdn.net/deta ...

  2. VC下载文件 + 显示进度条

    在codeproject里找了许久,发现这样一个VC下载文件并显示进度条的源码,于是添加了些中文注释: 1.下载线程函数: UINT DownloadFile(LPVOID pParam) { CWn ...

  3. jQuery上传文件显示进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  4. ajax实现无刷新上传附件并且显示进度条的实例

    首先:得把php.ini中的post_max_size和upload_max_filesize改成200M或更大(进度条好看效果,默认是2M) html和js代码: <!DOCTYPE html ...

  5. Springmvc+uploadify实现文件带进度条批量上传

    网上看了很多关于文件上传的帖子,众口不一,感觉有点乱,最近正好公司的项目里用到JQuery的uploadify控件做文件上传,所以整理下头绪,搞篇文档出来,供亲们分享. Uploadify控件的主要优 ...

  6. Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...

  7. 项目一、ajax上传数据（显示进度条）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. libcurl开源库在Win32程序中使用下载文件显示进度条实例

    一.配置工程引用libcurl库 #define CURL_STATICLIB #include "curl/curl.h" #ifdef _DEBUG #pragma comme ...

  9. Android 下载文件 显示进度条

    加入两个权限 一个是联网,另一个是读写SD卡 <uses-permission android:name="android.permission.INTERNET">& ...

随机推荐

  1. sum(n,m)的解法

    给出两个整数n和m,你应该计算从n到m的所有整数的和.换句话说,你应该计算: SUM(n,m)= n +(n + 1)+(n + 2)+ ... +(m-1)+ m 方法1. 方法2.

  2. Elasticsearch中Mapping

    映射(Mapping) 概念:创建索引时,可以预先定义字段的类型以及相关属性.从而使得索引建立得更加细致和完善.如果不预先设置映射,会自动识别输入的字段类型. 官方文档(字段数据类型):https:/ ...

  3. 分析bug是前端还是后端的

    如何分析一个bug是前端还是后端的? 平常提bug的时候,前端开发和后端开发总是扯皮,不承认是对方的bug 这种情况很容易判断,先抓包看请求报文,对着接口文档,看请求报文有没问题,有问题就是前端发的数 ...

  4. Selenium（4）

    练习1:使用selenium+firefox测试ecshop登录过程 一.WebDriver 1.启动浏览器 (1)启动Firefox浏览器 a.启动默认路径下的浏览器 WebDriver drive ...

  5. Resource ResourceLoader

    DefaultResourceLoader   -- > ResourceLoader 方法 ResourceLoader getResource(String location); Class ...

  6. Jenkins配置邮件信息

    1.进入Manage Jenkins----系统配置 2.设置Jenkins地址和管理员邮箱(不设置管理员邮箱无法发送邮件) 3.配置系统管理员的邮件属性 4.点击[高级]配置系统管理员的邮件属性 5 ...

  7. @Value和@ConfigurationProperties

    1.@Value用法 https://blog.csdn.net/u010832551/article/details/73826914 2.@ConfigurationProperties用法 ht ...

  8. java两个实体公共属性赋值方法

    model1 info=new model1();info.setAge("123");info.setCode("1234");info.setName(&q ...

  9. maven的概念-02

    1.仓库 仓库分为两类:   1)  本地仓库    ->当前电脑上的maven仓库:         本地仓库的默认目录: ${user.home}/.m2/repository        ...

  10. Spring Boot教程（四十）使用Flyway来管理数据库版本

    在上面的使用JdbcTemplate一文中,主要通过spring提供的JdbcTemplate实现对用户表的增删改查操作.在实现这个例子的时候,我们事先在MySQL中创建了用户表.创建表的过程我们在实 ...