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. 小程序UI设计（7）-布局分解-左-上下结构

    FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...

  2. 查看电脑物理地址（MAC）方法

    首先打开电脑,按ctrl+R键,将会出现以下界面 然后直接点击确认即可,会出现管理员界面,如下 我们现在有两种查看MAC地址的方法: 方法一:.直接输入ipconfig/all(或者输入ipconfi ...

  3. php查找判断二维数组中是否含有某个值

    $arr = array( array('a', 'b'), array('c', 'd') ); in_array('a', $arr); // 此时返回的永远都是 false deep_in_ar ...

  4. runnerw.exe: CreateProcess failed with error 216 (no message available)

    看描述,创建进程失败,应该是main这个入口文件的问题. 检查包名.发现问题,IDE自动将包名导成了当前的目录名(模块) 上图两者不一致导致 解决: 修改包名为main 注:一个model下只能有一个 ...

  5. Windows安装Redis并添加本地自启动服务

    概况 在windows本地搭建redis缓存,添加到本地计算机的服务中,保证每次开机自动启动服务. 第一步:下载redis(我的是计算机win10,64位) https://github.com/Mi ...

  6. jekins初始化

    持续交付:代码随着项目深入不断增多,不断完善,因此谓之持续交付:亦或是项目功能不断改进,修正都造成了交付活动的持续性. 好处:降低风险,尽早发现问题,单元测试通过不意味着集成测试也能通过. jenki ...

  7. vscode安装eslint插件，代码统一自动修复

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...

  8. Python之hmac模块的使用

    hmac模块的作用: 用于验证信息的完整性. 1.hmac消息签名(默认使用MD5加算法) #!/usr/bin/env python # -*- coding: utf-8 -*- import h ...

  9. 征途堆积出友情的永恒「堆优化dp」

    直接写题解: 很简单的dp暴力转移式子:f[i]=MAX{f[j]+max(tax[j],sum[i]-sum[j])} 观察式子,只有一个变量sum[i]; 而其他都为定量; 则考虑维护 两个定量: ...

  10. RabbitMQ安装遇到的问题及解决记录

    提示:若是win10 请注意计算机名称不能有中文 安装Rabbit MQ 需要先安装 Erlang 这里下载版本Erlang OTP22.0 http://www.erlang.org/downloa ...