1.定义UI结构
<!-- 导入jquery -->
<script src="../lib/jquery.js"></script>
<!-- 文件选择框 -->
<input type="file" id="file1" />
<!-- 上传文件按钮 -->
<button id="btnUpload">上传文件</button>
2.判断是否选择了文件
$(function () {
$('#btnUpload').on('click', function() {
var files = $('#file1')[0].files
if(files.length <= 0) {
return alert('请选择文件后再上传')
}
console.log('ok')
})
})
3.向formdata中追加文件
var fd = new FormData()
append('avatar',files[0])
4.jquery发起上传文件的请求
$.ajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
data: fd,
processData: false,
contentType: false,
success: function(res) {
console.log(res);
}
})
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入jquery -->
<script src="../lib/jquery.js"></script>
</head>
<body>
<!-- 文件选择框 -->
<input type="file" id="file1" />
<!-- 上传文件按钮 -->
<button id="btnUpload">上传文件</button>
<br>
<img src="./images/loading.gif" style="display: none;" id="loading">
<script>
$(function () {
//监听到ajax发起请求
$(document).ajaxStart(function() {
$('#loading').show()
})
//监听到ajax完成请求
$(document).ajaxStop(function() {
$('#loading').hide()
})
$('#btnUpload').on('click', function() {
var files = $('#file1')[0].files
if(files.length <= 0) {
return alert('请选择文件后再上传')
}
console.log('ok')
var fd = new FormData()
fd.append('avatar',files[0])
$.ajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
data: fd,
processData: false,
contentType: false,
success: function(res) {
console.log(res);
}
})
})
})
</script>
</body>
</html>
更多推荐
使用jquery实现文件上传的步骤
发布评论