用页面内嵌iframe方式
表单页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>iframe upload</title>
</head>
<body>
<iframe style="display:none;" src="blank.html" name="upTrans"></iframe>
<!-- target为本页iframe，异步上传 -->
<!-- enctype="multipart/form-data" -->
<!-- method必须为post -->
<form action="uploadFile.php" target="upTrans" enctype="multipart/form-data" method="POST">
<input type="file" name="file" id="inputFile"><span class="tip"></span>
<br>
<input type="submit" value="确定">
</form>
<script type="text/javascript">
function uploadHandler(data){
console.log(data);
}
</script>
</body>
</html>
上传文件处理uploadFile.php
<?php
$filename = "file";
$result = array(
"status" => -1,
"msg" => "",
);
if($_FILES[$filename]["size"] < 20 * 1024 * 1024){
if ($_FILES[$filename]["error"] > 0) {
$result['msg'] = "上传失败。Error: " . $_FILES[$filename]["error"];
$result['status'] = -1;
} else {
if (file_exists("upload/" . $_FILES[$filename]["name"])) {
$result['status'] = -1;
$result['msg'] = "上传失败，文件已存在";
} else {
// upload 路径为当前php文件的相对路径
move_uploaded_file($_FILES[$filename]["tmp_name"], "upload/" . $_FILES[$filename]["name"]);
$result['status'] = 1;
$result['msg'] = "上传成功";
}
}
} else {
$result['status'] = -2;
$result['msg'] = "上传文件超过20M";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>uploadTrans</title>
</head>
<body>
<script type="text/javascript">
if(window.parent.uploadHandler){
window.parent.uploadHandler(<?php echo json_encode($result)?>);
}
</script>
</body>
</html>
原理：
1. 设表单target为iframe。即在隐藏的iframe中加载uploadFile.php
2. uploadFile.php输入内容。有用的就是js部分。调用父页面的全局方法uploadHandler，传入上传结果信息
注意点：
1. 表单加属性enctype="multipart/form-data"，method必须为post。
2. 父页面有全局方法uploadHandler，处理php的返回结果
3. php处理中，将上传的文件从临时文件夹move到另一个有写权限的文件夹中，不然会被清除
4. 可用$_FILES[$filename]["size"]对上传文件进行大小限制，可用$_FILES[$filename]["type"]对上传文件进行类型过滤