图片上传

<body>
    <input type="file" id="inp" multiple>
    <script>
        let inp = document.getElementById('inp')
        inp.onchange = function(e){
            console.log(e)
            let filesList = this.files
            for (let i = 0; i < filesList.length; i++) {
               let formData = new FormData() // 表单对象
               formData.append('imgData', filesList[i]) // imgData 命名
               let xhr = new XMLHttpRequest()
              //    上传的进度条
                console.log(xhr.upload)
                /*
                
                    onabort: null // 取消
                    onerror: null // 报错
                    onload: null // 成功之后
                    onloadend: null // 结束之后
                    onloadstart: null // 开始加载
                    onprogress: null // 进度
                    ontimeout: null // 延迟
                    
                */
                // 监听进度
                xhr.upload.onprogress = function(e){
                    console.log(e.loaded) // 上传多少数据
                    console.log(e.total) // 总大小
                    let biLi = e.loaded/e.total * 100 + '%' // 算出比例
                    
                }
                
               xhr.open('post', './upload.php', true)
               xhr.send(formData)
               xhr.onreadystatechange = function(){

               }
            }
        }
    </script>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容