【jQuery】实现文件上传和loading效果

一、 jQuery实现文件上传

1. 定义UI结构

<!-- 导入 jQuery -->
<script src="./lib/jquery.js"></script>
<!-- 文件选择框 -->
<input type="file" id="file1" />
<!-- 上传文件按钮 -->
<button id="btnUpload">上传</button>

2. 验证是否选择了文件

$('#btnUpload').on('click', function() {
// 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表
var files = $('#file1')[0].files
// 2. 判断是否选择了文件
if (files.length <= 0) {
return alert('请选择图片后再上传！‘)
}
})

3. 向FormData中追加文件

// 向 FormData 中追加文件