我们有的时候 上传文件的时候 需要把整个页面都要刷新 如果页面少的是的时候 是很快就可以刷新的 但是页面东西一旦多的时候 就会十分缓慢 所以 我们用ajax技术 来上传
//这是一个上传图片的页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" enctype="multipart/form-data" id="upForm">
<input type="file" name="file" ><br><br>
<input type="button" value="提交" οnclick="checkfile()">
</form>
<div class="picDis">
<img src="" alt="">
</div>
</body>
</html>
//我们要引入jQuery来做
<script src="jquery-1.9.1.min.js"></script>//引入
<script>
function checkfile() {
//formdata储存异步上传数据
var formData = new FormData($('form')[0]);
console.log(formData);
formData.append('file', $(':file')[0].files[0]);
//坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
$.ajax({
url: 'ajax1.php',//地址
type: 'POST',//方法
data: formData,
//这两个设置项必填
contentType: false,
processData: false,
success: function (data) {
console.log(data)
var srcPath = data;
//注意这里的路径要根据自己的储存文件的路径设置
$('.picDis img').attr('src', srcPath);
}
})
}
</script>
//新的页面 处理上传的图片
<?php
$upFile = $_FILES['file'];
/**
* 创建文件夹函数,用于创建保存文件的文件夹
* @param str $dirPath 文件夹名称
* @return str $dirPath 文件夹名称
*/
function creaDir($dirPath){
$curPath = dirname(__FILE__);
$path = $curPath.'\\'.$dirPath;
if (is_dir($path) || mkdir($path,0777,true)) {
return $dirPath;
}
}
//判断文件是否为空或者出错
if ($upFile['error']==0 && !empty($upFile)) {
$dirpath = creaDir('upload');
$filename = $_FILES['file']['name'];
$queryPath = './'.$dirpath.'/'.$filename;
//move_uploaded_file将浏览器缓存file转移到服务器文件夹
if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
echo $queryPath;
}
}
这是简单的一个用ajax上传文件的代码
用了ajax技术