首先：得把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. 判断listview是上滑还是下滑的方法

    方法一: 用setOnScrollListener(new AbsListView.OnScrollListener())来实现,判断滑动后显示的第一个条目 ,与滑动前的第一个条目的大小来判断, 这种 ...

  2. [HTML]页面间传值的五种方法

    一.QueryString传值:1. 这是最简单的传值方式,但缺点是传的值会显示在浏览器的地址栏中且不能传递对象,只适用于传递简单的且安全性要求不高的整数值,例如: 2. 新建一个WEB项目,添加一个 ...

  3. [OSG][转]osg格式文件

    转自:http://blog.csdn.net/timothyfly/article/details/7826139 osg格式文件中如何处理多个节点共享一个子节点 下面一段程序中,共有三个Group ...

  4. HDU-1042 N！

    首先明白这是大数问题,大数问题大多采用数组来实现.如何进位.求余等.比如1047 (Integer Inquiry): 对于1042问题 计算10000以内数的阶乘,因为10000的阶乘达到35660 ...

  5. Spring框架bean的配置（2）：SpEL：引用 Bean、属性和方法。。。

    将这些架包放入在工程目录下建立的lib文件夹里,并解压 commons-logging-1.1.1 spring-aop-4.0.0.RELEASE spring-beans-4.0.0.RELEAS ...

  6. 为开发者准备的9个实用PHP代码片段

    一．查看邮件是否已被阅读 当你发送邮件时,你肯定很想知道你的邮件是否已被对方查看.下面的代码就能实现记录阅读你邮件的IP地址,还有实际的阅读日期和时间. error_reporting(0);Head ...

  7. (POJ2635)The Embarrassed Cryptographer(大数取模)

    The Embarrassed Cryptographer Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 13041 Accep ...

  8. DP游戏开发随记9-日常，推箱子

    模型只有一个推的动作文件 日常,更新了一下推箱子的测试用例 4个dummy点,点乘判断是在那个面,然后射线检测墙壁.

  9. CSUFT 1005 Coffin Tiles

    1005: Coffin Tiles Time Limit: 1 Sec      Memory Limit: 128 MB Submit: 2      Solved: 2 Description ...

  10. SIGPIPE信号详解

    转自:http://blog.csdn.net/lmh12506/article/details/8457772 前一段面试的时候被问到项目中有没有处理SIGPIPE信号,怎么处理的?当时没有答出来, ...