使用jquery实现文件上传的步骤

hcoke

已于 2022-09-07 13:09:23 修改

阅读量9.9k

点赞数 4

分类专栏：学习笔记 ajax 文章标签： ajax

于 2022-04-20 21:25:10 首次发布

本文链接：https://blog.csdn.net/m0_62962469/article/details/124306979

版权

学习笔记同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

ajax

15 篇文章 0 订阅

订阅专栏

本文介绍了如何使用jQuery创建文件上传功能，包括选择文件、验证文件、构造FormData并发送POST请求到`http://www.liulongbin.top:3006/api/upload/avatar`。关键步骤包括创建选择框、文件检查、FormData操作和AJAX上传。

摘要由CSDN通过智能技术生成

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>