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. dfs序+RMQ求LCA详解

    首先安利自己倍增求LCA的博客,前置(算不上)知识在此. LCA有3种求法:倍增求lca(上面qwq),树链剖分求lca(什么时候会了树链剖分再说.),还有,标题. 是的你也来和我一起学习这个了qwq ...

  2. JavaScript设计模式与开发实践（一）

    一.this this的指向大致可以分为以下几种: 作为对象的方法调用 作为普通函数调用 构造器调用 Function.prototype.call或Function.prototype.apply ...

  3. java WebSocket HTML页面

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

  4. Java 使用jsp和servlet实现验证码功能

    验证码主要是为了防止我们的网站被有些人和黑客恶意攻击,比如我们网站的注册页面,如果我们在用户注册的时候不加上一个验证码框的话,别人就可以写一个脚本对你的网站进行恶意的注册,比如每分钟对你的网站进行n次 ...

  5. Web UI开发推荐！Kendo UI for jQuery自定义小部件——使用MVVM

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  6. 洛谷P3810-陌上开花(三维偏序, CDQ, 树状数组)

    链接: https://www.luogu.org/problem/P3810#submit 题意: 一个元素三个属性, x, y, z, 给定求f(b) = {ax <= bx, ay < ...

  7. 题解 【NOIP2014】解方程

    题面 解析 这题的数据看起来似乎特别吓人... 但实际上, 这题非常好想. 只需要模一个大质数就行了(我模的是1e9+7)(实测有效) 另外,a要用快读读入,再一边模Mod(因为实在太大了). 然后, ...

  8. 主流包管理工具npm、yarn、cnpm、pnpm之间的区别与联系——原理篇

    接触 node 之后,一直使用npm包管理工具, cnpm 一开始会用一些,但是并没有觉得比 npm 快得多,使用 cnpm 的时候还经常安装不成功,只能再用 npm 安装一遍,渐渐的就弃用了 cnp ...

  9. RestFul是啥

    1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的 ...

  10. OI路上 day -9

    /* 嗯还有9天. 就只有9天了. 啊还剩9天吖! 多年后 我可能还会记得 那些年,我们学过的算法. 多年后 我可能会对别人说 我学过OI我喜欢OI并一直热爱着它. 9天后 我可能再也不会来到这个地方 ...