Ajax上传图片

本是古典何须时尚 2023-09-23 16:14 63阅读 0赞

<!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>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
     
    <body>
        
        <input type="file" id="file1">
        
        <button id="btnupload">上传文件</button>
        <br/>
        <div class="progress" >
            <div class="progress-bar progress-bar-striped active"  id="precent">
                0%
            </div>
        </div>
        
        <img alt="" id="img" width="800">
    	
     
        <script>
           var precent = document.querySelector('#precent')
            var btnupload = document.querySelector('#btnupload')
            btnupload.addEventListener('click', function() {
                var files = document.querySelector('#file1').files
                if (files.length <= 0) {
                    return alert('请选择要上传的文件')
                }
     
                var fd = new FormData()
                fd.append('avatar', files[0])
                var xhr = new XMLHttpRequest()
     
                xhr.upload.onprogress = function(e) {
                    console.log(e);
                    if (e.lengthComputable) {
                        var h = Math.ceil((e.loaded / e.total) * 100)
                        precent.style.width = h + '%'
                        precent.innerHTML = h + '%'
                        console.log(h);
                    }
                }
                xhr.upload.onload = function() {
                    $('#precent').removeClass().addClass('progress-bar progress-bar-success')
                }
     
                xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
                xhr.send(fd)
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var data = JSON.parse(xhr.responseText)
                        console.log(data);
                        if (data.status == 200) {
                            console.log('上传成功');
                            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                        } else {
                            console.log('上传失败');
                        }
                    }
                }
            })
        </script>
    </body>
     
    </html>

上传成功后的效果图：

![d9bc634e8fbd49e5b9b130912e4bd083.png][]

[d9bc634e8fbd49e5b9b130912e4bd083.png]: https://img-blog.csdnimg.cn/d9bc634e8fbd49e5b9b130912e4bd083.png