异步文件上传
goer ... 2022-01-15 小于 1 分钟
[toc]
# 异步文件上传
我们都知道，表单上传数据都会刷新页面，一定程度会影响用户体验
# 直接上代码
前端
<div class="up_data">
<!-- 多文件上传 multiple="multiple" -->
<form action="" id="formData" enctype="multipart/form-data">
<input type="file" name="upfile[]" class="file" multiple="multiple">
<input type="text" name="name">
</form>
<div class="imgDiv">
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
多文件上传 要加 =>
multiple="multiple"name =>name="upfile[]"数组
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// 上传文件
$('.upFile').click(function(){
// 文件上传的地方
var inputFile = $('.file');
// console.log(inputFile[0].value);
// return false;
// 判断是否有图片
if(inputFile[0].value === ''){
console.log('选择图片');
return false;
}
//对象参数必须是一个html元素
var form = new FormData(document.getElementById("formData"));
console.log(form);
$.ajax({
type:'post',
url:'http://www.web.cn/upload.php', //接口
data:form,
cache:false,
processData:false,
contentType:false,
success:function(data){
console.log(data);
}
})
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
后端
// upload.php
function print_p($arr){
echo '<pre>';
print_r($arr);
echo '</pre>';
}
$print_P($_FILES); //查看打印的数组
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9