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

1.定义UI结构<script src="../lib/jquery.js"></script><input type="file" id="file1" /><button id="btnUpload">上传文件</

hcoke

10145人浏览 · 2022-04-20 21:25:10

hcoke · 2022-04-20 21:25:10 发布

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>