ajax上传文件
需要用到js的对象FormData，具体还不是很了解，但是正在学习之中
原生ajax上传文件
<form action="upload2.php" method="post" enctype="multipart/form-data">
<input type="file" name="img"><br>
<input type="button" value="提交">
</form>
<script type="text/javascript">
$(function(){
$("input[type='button']").click(function(){
var f = $("form")[0]
var formdata = new FormData(f)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log(xhr.responseText)
}
}
xhr.open('post','upload.php')
xhr.send(formdata)
})
})
</script>
</body>
</html>
jQuery ----ajax上传文件
<form action="upload2.php" method="post" enctype="multipart/form-data">
<input type="file" name="img"><br>
<input type="button" value="提交">
</form>
<script type="text/javascript">
$(function(){
$("input[type='button']").click(function(){
var f = $("form")[0]
var formdata = new FormData(f)
$.ajax({
url:'./upload.php',
data:formdata,
processData:false,
cache:false,
contentType:false,
type:'post',
success:function(data){
console.log(data)
}
})
})
})
</script>
</body>
</html>
这里要注意几点：
processData设置为false。因为data值是FormData对象，不需要对数据做处理。
<form>标签添加enctype="multipart/form-data"属性。
cache设置为false，上传文件不需要缓存。
contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。
如果不是用<form>表单构造FormData对象又该怎么做呢？使用FormData对象添加字段方式上传文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dddd</title>
<script type="text/javascript" src="jquery.1.7.2.min.js"></script>
</head>
<body>
<div id="uploadForm">
<input id="file" type="file" name="img">
<button id="upload" type="button">upload</button>
</div>
<script type="text/javascript">
$(function(){
var formData = new FormData();
$("#upload").click(function(){
formData.append('img', $('#file')[0].files[0]);
console.log(formData)
$.ajax({
url: 'upload.php',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
success:function(data){
console.log(data)
}
});
})
})
</script>
</body>
</html>
改天再详细研究
原文链接：https://blog.csdn.net/xllily_11/article/details/52330280
