用 XMLHttpRequest（xhr）多文件上传和渲染

xhr是浏览器提供的Javascript对象，可以请求服务器上的数据资源，JQuery中的Ajax函数就是基于xhr对象封装出来的。当然，你也能使用axios，基本形式都差不多。
现在做html结构

<input type="file" id='file1' multiplemuiti='multiple'> <button id="btn">选择上传</button>
    </br>
    <div></div>

file是上传文件类型 muitiplemuiti是设置能否多个上传的属性 后面跟布尔值 div是用来渲染图片的 这样能看的更直观
下面是js逻辑代码

var btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
        var files = document.querySelector('#file1').files
        for (var i = 0; i < files.length; i++) {
            var fn = new FormData
            fn.append('avatar', files[i])
            cs(fn)
        }
        if (files.length <= 0) return alert('请您输入文件')
        function cs(xs) {
            var xhr = new XMLHttpRequeurlst()
            xhr.open('post', url)
            xhr.send(xs)
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = JSON.parse(xhr.responseText)
                    if (data.status == 200) {
                        // document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                        var img=document.createElement('img')
                        img.src= '根目录' + data.url
                        document.querySelector('div').appendChild(img)
                    } else {
                        alert('接受图片失败')
                    }

                }
            }
        }


    })

先为按钮绑定一个点击事件，们这里是获得图片，这样更直观。然后获取点击的图片，我们需要遍历这个图片得到每一个图片。然后new一个FormData，一个表单域，用来包裹接收的文件。如果为0，就提醒用户传递数据。然后用xhr的数据传递形式，先创建一个xhr，然后open，里面放URL和type 然后send里面放我们要发送给服务器的数据，最后用回调函数得到返回的文件。期间我们需要注意的是图片的src要加上接口的根目录。最后需要创建图片元素，需要用VAR 最后用上面的空 div添加即可。