首先：得把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. ACM第四站————最小生成树（普里姆算法）

    对于一个带权的无向连通图,其每个生成树所有边上的权值之和可能不同,我们把所有边上权值之和最小的生成树称为图的最小生成树. 普里姆算法是以其中某一顶点为起点,逐步寻找各个顶点上最小权值的边来构建最小生成 ...

  2. bzoj 1588营业额统计(HNOI 2002)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1588 splay  bottom-up的数组实现. 题意就是给你一组数,求每个数与在其前面且与其最相 ...

  3. SharePoint自动化系列——Content Type相关timer jobs一键执行

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 背景: 在SharePoint Central Administration->Monito ...

  4. [转]实战 SQL Server 2008 数据库误删除数据的恢复

    实战 SQL Server 2008 数据库误删除数据的恢复 关键字:SQL Server 2008, recover deleted records 今天有个朋友很着急地打电话给我,他用delete ...

  5. Mysql-学习笔记（==》权限管理 十 三）

    -- 用户与权限管理-- 查看当前服务器上的所有账号密码主机SELECT USER,PASSWORD,HOST FROM mysql.user; -- 设置账号密码SET PASSWORD=PASSW ...

  6. grails-domain-id 无生成策略，由程序控制

    一 domain class 中标示 class Menu implements Comparable<Menu>{ String id; String name; } static co ...

  7. hibernate.properties

    hibernate.dialect=org.hibernate.dialect.MySQL5Dialect #hibernate.dialect=org.hibernate.dialect.Oracl ...

  8. Python 主要模块和常用方法简览

    ******************** PY核心模块方法 ******************** 文件系统功能 os模块 目录:      chdir() :改变工作目录       chroot ...

  9. AfterEffects 关键帧辅助功能

    http://www.cocoachina.com/design/20160121/15073.html 标准缓动曲线查询网址:http://easings.net/zh-cn

  10. dubbo源码之四——dubbo服务发布

    dubbo版本:2.5.4 服务发布是服务提供方向注册中心注册服务过程,以便服务消费者从注册中心查阅并调用服务. 服务发布方在spring的配置文件中配置如下: <bean id="d ...