js的使用原生的XMLHttpRequest上传文件

原来的XMLHttpRequest对象的缺点：

1.只支持文本数据的传递，不支持二进制数据。

2.传递数据的时候，没有progress事件，不能实时显示传递的进度信息。

3.受同源策略的限制，不能发送跨域的请求。

新标准的XMLHttpRequest的改进：

1.可以传递二进制数据。

2.在服务器端设置了CORS允许跨域请求的时候，可以获取跨域的数据。

3.可以使用原生的FormData对象来管理要发送的表单数据。

4.提供了progress事件，可以提供进度信息。在下载和上传的时候，都有progress事件，下载的时候，progress事件由XMLHttpRequest本身触发，上传的时候，由XMLHttpRequest.upload对象触发，可以通过addEventListener来添加事件处理方法。

 

利用新标准的XMLHttpRequest对象，我们可以非常方便的实现文件AJAX上传功能。

html:

<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>使用XMLHttpRequest上传文件</title>
        <style type="text/css">
            .container {
                width: 500px;
                margin: 0 auto;
            }
            .progress-bar {
                border: 1px solid #000;
            }
            .progress {
                width: 0;
                background: #DEDEDE;
                height: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <p>
                选择文件:
                <input type="file" id="ipt-file"/>
                <button type="button" id="btn-upload">上传</button>
            </p>
            <div class="progress-bar">
                <div class="progress"  id="progress"></div>
            </div>
            <p id="info"></p>
        </div>
        <script src="./js/upload.js"></script>
    </body>
</html>
 
uplod.js
 
var button = document.querySelector("#btn-upload"),
    input = document.querySelector("#ipt-file"),
    progress = document.querySelector("#progress"),
    info = document.querySelector("#info");
 
var upload = function() {
    if (input.files.length === 0) {
        console.log("未选择文件");
        return;
    }
 
    var formData = new FormData();
    formData.append("file", input.files[0]);
 
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
            info.innerHTML = xhr.responseText;
        }
    };
 
    xhr.upload.addEventListener("progress", function(event) {
        if(event.lengthComputable){
            progress.style.width = Math.ceil(event.loaded * 100 / event.total) + "%";
        }
    }, false);
 
    xhr.open("POST", "./upload");
    xhr.send(formData);
};
 
button.addEventListener("click", upload, false);
 
摘抄于原文请参考：参考地址，谢谢
posted @ 2020-09-21 10:29  三寸日光  阅读(1755)  评论(0)    收藏  举报