ajax 文件上传带进度条原理

来源：互联网发布：mac windows怎么截屏编辑：程序博客网时间：2024/06/05 17:35

html代码

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head> <body>    <div style="width:500px;height:20px;border:1px solid gray">        <div id='prog' style="height:100%;width:0%;background:green;"></div>    </div>    <form action="./1.php" method="post" enctype="multipart/form-data" target="frm">        <p><input type="file" name="pic" id=""></p>        <p><input type="text" name="username" id=""></p>        <p><input type="submit" value="提交"></p>    </form>    <iframe src="1.php" name='frm' ></iframe></body><script type="text/javascript">    var fm = document.getElementsByTagName('form')[0];    fm.onsubmit = function(){        var fmdata = new FormData(this);        var xhr = new XMLHttpRequest();        xhr.onreadystatechange = function(){            if(this.readyState == 4 ){                alert(this.responseText);            }        }        xhr.upload.onprogress = function(ev){            if(ev.lengthComputable){                var per = 100* ev.loaded/ev.total;                document.getElementById('prog').style.width = per + '%';            }        }        xhr.open('post','2.php',true);        xhr.send(fmdata);        return false;    }</script></html>

php代码

1.php

<?phpif($_FILES){    echo '上传成功';}?><h1>上传后台</h1>

2.php

<?php// print_r($_FILES);// print_r($_POST);echo move_uploaded_file($_FILES['pic']['tmp_name'], './' . $_FILES['pic']['name'])?'ok':'fail';?>

0 0