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. 从n个数里面找最大的两个数理论最少需要比较

    答案是:n+logn-2 过程是这样的: 甲乙比甲胜出,丙丁比丙胜出,最后甲丙比较,甲胜出...容易得出找出最大数为n-1次. 现在开始找出第二大的数字:明显,第二大的数字,一定和甲进行过比较.... ...

  2. 【ARC072 E】Alice in linear land

    被智商题劝退,告辞 题意 有一个人在一条数轴的距离原点为 \(D\) 的位置,他可以执行 \(n\) 次操作,每次操作为给定一个整数 \(d_i\),这个人向原点的方向走 \(d_i\) 个单位,但如 ...

  3. POJ 1741 单次询问树上距离<=K的点对数 点分治

    #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ; ; ], ...

  4. MyBatis---join 查询

    在实际业务中,经常能碰到多表关联查询 下面的Demo,讲举例join查询在MyBatis中的实现 User 类: package com.zy.domain; import java.io.Seria ...

  5. 【leetcode】1282. Group the People Given the Group Size They Belong To

    题目如下: There are n people whose IDs go from 0 to n - 1 and each person belongs exactly to one group. ...

  6. 把 textbox 遍历赋值为空

    foreach (Control aa in this.Form.Controls){    if (aa.GetType().ToString() == "System.Web.UI.We ...

  7. poj 2976 Dropping tests (最大化平均值：二分查找)

    #include<iostream> #include<algorithm> #include<stdio.h> #include<math.h> #d ...

  8. hdu 5831 Rikka with Parenthesis II 括号匹配+交换

    Rikka with Parenthesis II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  9. Codevs 1213 解的个数(exgcd)

    1213 解的个数 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 已知整数x,y满足如下面的条件: ax+by+c=0 p< ...

  10. HZOJ 20190727 T2 单（树上dp+乱搞？+乱推式子？+dfs？）

    考试T2,考试时想到了40pts解法,即对于求b数组,随便瞎搞一下就oxxk,求a的话,很明显的高斯消元,但考试时不会打+没开double挂成10pts(我真sb),感觉考试策略还是不够成熟,而且感觉 ...