前台：1、ajax 2、formdata 3、修改php.ini post请求文件大小限制和附件文件大小限制（可搜索post和upload）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单练习</title>
<style type="text/css">
#back {width: 400px; height: 40px; background-color: #1c94c4}
#front {width: 0; height: 100%; background-color: #1c7b3b}
</style>
<script type="text/javascript">
window.onload = function () {
var formdom = document.getElementsByTagName('form')[0];
formdom.onsubmit = function (e) {
var fd = new FormData(formdom);
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4){
alert(ajax.responseText);
}
}
ajax.upload.onprogress = function (evt) {
var load = evt.loaded;
var total = evt.total;
var front = document.getElementById('front');
var per = Math.floor(load/total*100) +'%';
front.style.width = per;
front.innerHTML = per;
}
ajax.open('post', './formsubmit.php');
// ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(fd);
e.preventDefault();
}
}
</script>
</head>
<body>
<form action="./formsubmit.php">
<p>这是提交表单练习</p>
<p>用户名<input type="text" name="username" id="username" /></p>
<p>密码 <input type="password" name="pwd" id="pwd"/></p>
<p>头像 <input type="file" name="file" id="file"/></p>
<div id="back"><div id="front"></div></div>
<input type="submit" value="提交">
</form>
</body>
</html>
后台：1、修改chmod -R 777 权限
// 由原来的路径移动到目标路径
$dir = $_FILES['file']['tmp_name'];
$des = './upload/' . $_FILES['file']['name'];
$result = move_uploaded_file($dir, $des);
if ($result == 1){
echo 'succuss';
}else{
echo 'fail';
}
