首先：得把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. java 面试每日一题

    题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在 第10次落地时,共经过多少米?第10次反弹多高? import java.util.Scanner; public cl ...

  2. [c++][语言语法]函数模板和模板函数 及参数类型的运行时判断

    参考:http://blog.csdn.net/beyondhaven/article/details/4204345 参考:http://blog.csdn.net/joeblackzqq/arti ...

  3. poj2482 Stars in Your Window

    此题可用线段树或静态二叉树来做. 考虑用线段树: 很容易想到先限定矩形横轴范围再考虑在此纵轴上矩形内物品总价值的最大值. 那么枚举矩形横轴的复杂度是O(n)的,考虑如何快速获取纵轴上的最大值. 我们不 ...

  4. C#中容易被忽视的细节整理

    (有空更新系列) 1.params可变长度参数,默认值是长度为0的数组,而不是空 2.事件和委托默认值都是null 3.bool返回值的事件调用之后,其内部的合并方式是取最后一个合并对象的返回值

  5. UVa 133，发放救济金

    沿用前一个题的思路: 用left记录剩下的点,直到全部选完. 这里我的问题是,我一直pos = (pos + f + n)%n,这里的问题是对于B点来说,开始的位置是1,就成了(1+(-1) +n) ...

  6. Mysql 升级到 5.6 后插入语句时间字段报错：Incorrect datetime value: '' for column 'createtime'

    今天部署服务器项目运行,当遇见有时间数据对象的插入和更新操作的时候,就报错,如下: Caused by: com.mysql.jdbc.MysqlDataTruncation: Data trunca ...

  7. wpfのuri（让你完全明白wpf的图片加载方式以及URI写法）

    绝对 pack WPF URI pack://application:,,,/是协议:“,,,”是“///”的变体 1.资源文件 — 本地程序集 Uri uri = new Uri("pac ...

  8. android 源码目录介绍

    Android 4.0源码目录介绍|-- Makefile|-- bionic (bionic C库)|-- bootable  (启动引导相关代码)|-- build (存放系统编译规则及gener ...

  9. VC++使用WebBrowser控件，强制给控件指定版本显示网页

    转载:http://www.cnblogs.com/1175429393wljblog/p/5398928.html 最近为了抓取淘宝的成交数据,用C#的WebBrowser控件开发了一个简单的程序. ...

  10. POJ 2533 Longest Ordered Subsequence 最长递增序列

      Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subsequenc ...