首先：得把php.ini中的post_max_size和upload_max_filesize改成200M或更大（进度条好看效果，默认是2M）

html和js代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

        window.onload=function(){

            var fm=document.getElementsByTagName('form')[0];

            fm.onsubmit=function(evt){//表单事件

                var fd=new FormData(fm);//接受表单数据

                var xhr=new XMLHttpRequest();

                xhr.upload.onprogress=function(evt){//onprogress事件每0.1秒感应一次

                    //console.log(evt);

                    var loaded=evt.loaded;//已经上传的附件大小

                    var total=evt.total;//附件的总大小

                    var per=Math.floor((loaded/total)*100)+'%';

                    document.getElementById('son').style.width=per;

                    document.getElementById('son').innerHTML=per;

                }

                xhr.onreadystatechange=function(){//ajax返回状态

                    if (xhr.readyState==4) {

                        alert(xhr.responseText);

                    }

                }

                xhr.open('post','upload.php');//发送ajax方式和路径

                xhr.send(fd);//发生表单数据

                evt.preventDefault();//阻止浏览器跳转

            }

        }

    </script>

    <style>

        #pat{

            width:400px;

            height:5px;

            border:1px solid blue;

        }

        #son{

            width:0;

            height:100%;

            background-color:yellow;

        }

    </style>

</head>

<body>

    <form action="upload.php" >

        用户名：<input type="text" name='username'><br>

        <input type="file" name='file'><br>

        <input type="submit" value='提交'>

        <br><br>

        <div id='pat'><div id='son'></div></div>

</body>

</html>

php代码：

<?php

if ($_FILES['file']['error']>0) {

    exit('上传异常');

}

$path='./upload/';

$name=mt_rand('000','999').$_FILES['file']['name'];//在名字前加上三位随机数，这样能多次上传同一文件

$truename=$path.$name;

$truename=iconv('UTF-8','gb2312',$truename);//转码，使得能够上传中文名称附件

if (move_uploaded_file($_FILES['file']['tmp_name'],$truename)) {//$_FILES['file']['tmp_name']为临时存放目录

    echo 'upload success';

}else{

    echo 'upload error';

}

 ?>

效果图：

ajax实现无刷新上传附件并且显示进度条的实例的更多相关文章

  1. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  2. spring mvc + xmlHttpRequest2.0 实现无刷新上传文件，带进度条和剩余时间

    1.springmvc支持文件上传,需要在spring-mvc.xml配置文件中加上下面的一段话: <!-- 支持上传文件 --> <bean id="multipartR ...

  3. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  4. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

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

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  6. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  7. ajax+FormData+javascript 实现无刷新上传附件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. ajax 上传文件，显示进度条，进度条100%，进度条隐藏，出现卡顿就隐藏进度条，显示正在加载，再显示上传完成

    <form id="uploadForm" method="post" enctype="multipart/form-data"&g ...

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

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

随机推荐

  1. symfony在模板中生成url

    {{ path('homepage') }},这里的homepage是route配置文件的内容,或者叫别名.

  2. vscode使用php调试

    1:首先查看是否安装xdebug扩展 打开终端  ➜ ~ php -vPHP 5.6.24 (cli) (built: Jul 21 2016 14:27:54) Copyright (c) 1997 ...

  3. python安装numpy科学计算模块

    解决两个问题: (1)Import Error: No module named numpy (2)Python version 2.7 required, which was not found i ...

  4. sqlite3常用命令&语法

    sqlite数据库只用一个文件就ok,小巧方便,所以是一个非常不错的嵌入式数据库,SQLite大量的被用于手机,PDA,MP3播放器以及机顶盒设备.    Mozilla Firefox使用SQLit ...

  5. Entity Framework 第二篇 事务

    Entity Framework  事务 结合第一篇的代码 public class BaseRepository : ITransaction, IDisposable { private XFDb ...

  6. C#中求数组的子数组之和的最大值

    <编程之美>183页,问题2.14——求子数组的字数组之和的最大值.(整数数组) 我开始以为可以从数组中随意抽调元素组成子数组,于是就有了一种想法,把最大的元素抽出来,判断是大于0还是小于 ...

  7. C#自动化IO/XML作业

    PS:这是我们公司自动化测试留的一个作业,虽然我不是自动化的,但是也做了一下. Friday, November 28, 2014 ​这个也是我根据自动化部门的那次作业自己分析写的,没有写打log的过 ...

  8. hdu 1205 从整体考虑

    吃糖果 Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submiss ...

  9. 2016年6月23日 星期四 --出埃及记 Exodus 14:20

    2016年6月23日 星期四 --出埃及记 Exodus 14:20 coming between the armies of Egypt and Israel. Throughout the nig ...

  10. linux（centos）下SVN服务器如何搭建

    检测是否符合pptp的搭建环境的要求 使用下面的指令: 123 cat /dev/net/tun如果这条指令显示结果为下面的文本,则表明通过:cat: /dev/net/tun: File descr ...