正文

使用FormData对象和xhr实现文件上传

米耀华
米耀华 V管理员 /0 评论 /413 阅读
0922 
<body>
    <input type="file" id="file1">
    <button>上传</button>
    <hr>
    <img src="" alt="" id="img">

    <script>
        //获取按钮和表单元素
        var btn = document.querySelector('button')
        var file1 = document.querySelector('#file1')

        btn.addEventListener('click', function () {
            // 获取选中的文件列表
            var files = file1.files;
            console.log(files);
            // 判断选中的文件列表是否小于等于0 提示没有选择
            if (files.length <= 0) {
                return alert('还没有选择文件!')
            }

            // 表达数据对象
            var fd = new FormData();

            //avatar为接口中参数  files[0]为第一个文件
            fd.append('avatar', files[0])

            // ajax对象
            var xhr = new XMLHttpRequest();

            xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');

            xhr.send(fd);

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }

            }
        })
    </script>
</body>


转载请注明出处：米耀华博客