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. ngnix 配置说明

    #定义Nginx运行的用户和用户组 user www www; # #nginx进程数,建议设置为等于CPU总核心数. worker_processes ; # #全局错误日志定义类型,[ debug ...

  2. JMeter函数整理

    "_intSum” 功能:用于计算多个整数的和,可以是计算正整数和负整数的和,它有N个参数,最少有3个参数,最多不限.最后一个参数是函数名称,前面的其它参数是要求和的整数.这个函数在函数对话 ...

  3. Git 团队协作开发

    步骤一:进入别人github中的项目 步骤二: 步骤三: 修改 one.txt 或者 新增 文件 都可以 步骤四: 在提交时,要习惯 使用 git pull 命令,防止有人在你写代码时候,提交过一些东 ...

  4. 30秒钟解决MariaDB插入汉字时出现错误

    示例: create table demo( name varchar(10), sex varchar(5) )engine=innoDB default charset=utf8; 表的后面加上指 ...

  5. Linux的SSH免密登录（一）

    1.从cp/scp命令出发 scp(secure copy)是linux系统下基于ssh登录进行安全的远程文件拷贝的命令. 1. 传递文件到远程 scp local_file remote_usern ...

  6. python的序列化模块

    最近机器学习的模型需要序列化和反序列化,因为写个博客总结一下几个模型和数据等序列化的模块.

  7. shell编程初探

    #! /bin/sh #这是神圣丁的第一个shell脚本 name="陈培昌" echo "我就喜欢\"$name\"" echo '我就喜 ...

  8. jsp模糊查询

    模板 查询之前: 查询之后: jsp的<script>: $(".inp2").click(function(){ var s=$(".inp"). ...

  9. TensorFlow - 深度学习破解验证码 实验

    TensorFlow - 深度学习破解验证码 简介:验证码主要用于防刷,传统的验证码识别算法一般需要把验证码分割为单个字符,然后逐个识别,如果字符之间相互重叠,传统的算法就然并卵了,本文采用cnn对验 ...

  10. [Functional Programming] Church Encodings: Numberals

    const log = console.log; // zero :: &fa.a const zero = f => x => x; // zero is F // once : ...