Ajax带进度条文件上传

Ajax带进度条文件上传

html文件代码：

<html>
    <head>
    <title>FormData</title>    
    <script type="text/javascript">

/*进度条需要两个最基础的信息------总大小，已上传大小
  解决：在html5中有一个上传过程事件，在事件中可以读取这两个信息 ---- onprogress
具体思路：
    在上传过程中，不断的触发函数，函数读取已上传/总大小
不断的更新页面的进度条。
 */



//选择文件时调用
function selectfile(){
    //建立一个formdata对象
    var fd = new FormData();
    //得到文件对象
    var pic = document.getElementsByTagName('input')[0].files[0];
    //将文件内容追加到表单数据中
    //fd.append(pic.name,pic);
    fd.append("pic",pic);
    
    //建立html http对象，发送
    var xhr = new XMLHttpRequest();
    xhr.open('POST','HTML5up.php',true);    //post发送
    xhr.onreadystatechange = function(){
        if(this.readyState == 4){
            document.getElementById('debug').innerHTML = this.responseText;
        }
    }
    
    //利用XHR2的新标准，为上传过程，写一个监听函数
    xhr.upload.onprogress = function(ev){
        console.log(ev);
        if(ev.lengthComputable){
            var percent = 100 * ev.loaded/ev.total;
            var tex = percent+"  total="+ev.total+"<br/>loaded="+ev.loaded + "<hr/>";
            document.getElementById('bar').style.width = percent + "%";
            document.getElementById('bar').innerHTML = parseInt(percent) + "%"; 
            document.getElementById('debug2').innerHTML =  tex;
            //alert(percent+"  total="+ev.total+"<br/>loaded="+ev.loaded);
            
        }
        //alert('上传img');
    }
/*        //显示预览图片
    //建立一个img对象
    var tmpimg = document.createElement('img');
        //把二进制对象直接读成浏览器显示的资源
    tmpimg.src = window.URL.createObjectURL(pic);
    //动态创建img显示的标签
    document.getElementsByTagName('body')[0].appendChild(tmpimg);
*/

    xhr.send(fd);

}
    </script>

<style type='text/css'>
    img{ width:500px; }
    #progress{width:500px; height:15px; border:1px solid green;}
    #bar{width:0%; height:100%; background:green;}
</style>


    </head>
    <body>
        <form  enctype="multipart/form-data" method="POST">
            <input type="file" name="pic" onchange="selectfile();">
        </form>
        <hr/>
        <div id="progress">    
            <div id="bar"></div>
        </div>
        <div id="debug2"></div>
        <hr/>
        <div id="debug"></div>
        

    </body>
</html>

PHP文件代码：

<?php
print_r($_FILES);
if(isset($_FILES['pic']) && $_FILES['pic']['error'] == 0)
{
    if($_FILES['pic']['tmp_name']){
        chmod($_FILES['pic']['tmp_name'],0755);
        echo "<br/>",$_FILES['pic']['tmp_name'];
        echo  "<br/>","./upload/".$_FILES['pic']['name'];
        move_uploaded_file($_FILES['pic']['tmp_name'],"./upload/".$_FILES['pic']['name']);
        echo "ok";
    }
}else
    exit("faile");
?>

Ajax上传是，还受服务器的限制，下面就是修改服务器的上传大小限制

修改WampServer 的附件上传限制的方法：方法一：修改 php.ini 文件。