test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax+PHP实现异步图片上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" id="upForm">
<input type="file" name="file" >
<br>
<br>
<input type="button" value="提交">
</form>
<p class="picDis"> <img src="" alt=""> </p>
<script type="text/javascript">
$(':button').click(function(event) { //formdata储存异步上传数据
var formData = new FormData($('form')[0]);
formData.append('file', $(':file')[0].files[0]);
//坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
$.ajax({
url: 'server.php',
type: 'POST',
data: formData,
//这两个设置项必填
contentType: false,
processData: false,
success: function(data) {
console.log(data)
var srcPath = data;
console.log();
//注意这里的路径要根据自己的储存文件的路径设置
$('.picDis img').attr('src', srcPath);
}
})
});
</script>
</body>
</html>