通过ajax请求上传文件

最新推荐文章于 2024-03-28 17:16:20 发布

Dyc_SE

最新推荐文章于 2024-03-28 17:16:20 发布

阅读量412

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.youkuaiyun.com/Dyc_SE/article/details/123055606

版权

<body>
    <div>
        <input type="file" id="fileUpload">
        <input type="button" name="" id="btnUpload" value="上传">

    </div>
    <img src="" alt="" id="img" style="width: 500px;">
    <script>
        var btn = document.querySelector('#btnUpload')
        var file = document.querySelector('#fileUpload')
        btn.addEventListener('click', function() {
            if (file.files.length <= 0) {
                return alert('请选择你要上传的文件')
            }

            var hd = new FormData()
            hd.append('avatar', file.files[0])
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
            xhr.send(hd)
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var res = JSON.parse(xhr.responseText);
                    console.log(res);
                    if (res.status === 200) {
                        confirm('上传成功')
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + res.url;
                    } else {
                        alert('上传失败')
                    }
                }
            }

        })
    </script>
</body>