原生Ajax附件上传简单实例

html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> New Document </title>
    <meta name="Generator" content="NPP-Plugin">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">

    <script type="text/javascript">
    window.onload = function(){
        var f =document.getElementsByTagName('form')[0];
        f.onsubmit = function(evt){

            var fd = new FormData(this);
            var xhr = new XMLHttpRequest();

            var jdt_border = document.getElementById('jdt_border');
            var jdt_per = document.getElementById('jdt_per');
            var jdt_text = jdt_per.childNodes;

            xhr.upload.onprogress = function(evt){
                //console.log(evt);
                var loaded = evt.loaded;
                var total = evt.total;
                var percent = Math.floor((loaded/total)*100);
                //document.getElementById('perout').innerHTML = "已完成："+percent+"%";

                jdt_border.style.display = 'block';
                jdt_per.style.width = percent+'%';
                jdt_text[0].innerHTML = "已完成："+percent+"%";
            }

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    //alert(xhr.responseText);
                    //console.log(xhr);
                    //document.getElementById('perout').innerHTML = xhr.responseText;
                    jdt_text[0].innerHTML = xhr.responseText;
                }
            }
            xhr.open("post","./01.php");
            xhr.send(fd);

            evt.preventDefault();
        }
    }
    </script>

    <style type="text/css">
    .m {width:1000px;margin:0 auto;font-size: 12px;}
    .Bar ,.Bars { position: relative; width: 200px; border: 1px solid #B1D632; padding: 1px; } 
    .Bar div,.Bars div { display: block; position: relative;background:#00F; color: #333333;height: 20px; line-height: 20px;} 
    .Bars div{ background:#090} 
    .Bar div span,.Bars div span { position: absolute; width: 200px; text-align: center; font-weight: bold; } 
    .cent{  width:300px; overflow:hidden;display:none;} 
    </style>
</head>

<body>
    <div class="m">
        <h2>附件上传</h2>

        <form action="./01.php">
            <p><input type="file" name="pic"/></p>
            <p><input type="submit" value="提交" /></p>
        </form>

        <div id="perout" style="display:none;"></div>

        <div id="jdt_border" class="cent"> 
            <p> 
                <div class="Bars"> 
                    <div id="jdt_per" style=" 0%;"><span></span></div> 
                </div> 
            </p> 
        </div> 
    </div>
</body>
</html>

PHP代码：

<?php

ini_set("display_errors", "Off");
error_reporting(E_ALL^E_NOTICE^E_WARNING);

//print_r($_FILES);

/*
define("MAX_SIZE", 51200);

if($_FILES['pic']['size']>MAX_SIZE){
    die("文件不能大于".(MAX_SIZE/1024)."mb!");
}*/

if($_FILES['pic']['error']>0){
    die("文件格式错误！");
}

$path = "./upload/";
$name = time().$_FILES['pic']['name'];
$newPath = $path.$name;


if(!file_exists($newPath)){
    if(move_uploaded_file($_FILES['pic']['tmp_name'],iconv("UTF-8","GBK",$newPath))){
        echo "upload success!";
    }else{
        echo "upload fail!";
    }
}else{
    echo "$newPath 文件已存在！";
}

运行结果：