FormData以及原生Ajax上传图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baidu_35085676/article/details/80752254

Ajax对于表单提交来说，是一个很好的工具，他提供了异步提交的效果，这使得用户提交表单时不需要刷新页面就可获知提交成功与否，但一直以来，网上的示例大都是JQuery上传的教程，原生Ajax似乎并不受大家热爱，更别提原生Ajax上传图片的教程了，本篇将为你讲述JavaScript中使用FormData上传文件的教程

FormData

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。比起早先的Ajax，发送FormData的Ajax不仅可以发送图片，更好的一点是我们无需设置RequestHeader，也无需担心自己粗心写错xhr.send()中的参数。

用法

我们可以使用表单来构造一个FormData对象，也可以创建一个空的FormData对象，之后手动添加一些数据进去。

使用表单构造FormData对象。

做法很简单，使用getElementById()或querySelector()这类选择器获取表单对象，将其传入FormData的构造方法，如下：

<form id="formA" method="POST" action="/upload" enctype="multipart/form-data">
    <input type="text" name="username" id="username">
    <input type="file" name="pic" id="pic" multiple="multiple">
    <input type="button" value="FormData提交一个Form" onclick="sub1()">
</form>

function sub1() {
        let form = document.getElementById('formA');
        let data = new FormData(form);
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status==200){
                alert(xhr.responseText);
            }
        };
        xhr.open('POST','/upload');
        xhr.send(data)
    }

空的FormData对象&添加数据

这个也很简单，添加数据方法的第一个参数是数据的名字，第二个参数是数据的值。如下：

<form id="formA" method="POST" action="/upload" enctype="multipart/form-data">
    <input type="text" name="username" id="username">
    <input type="file" name="pic" id="pic" multiple="multiple">
    <input type="button" value="FormData添加数据后提交" onclick="sub2()">
</form>

function sub2() {
    let username = document.getElementById('username');
    let pics = document.getElementById('pic');
    let data = new FormData();
    data.append('username',username.value);
    for(let pic of pics.files){
        data.append('pic',pic);
    }
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status==200){
            alert(xhr.responseText);
        }
    };
    xhr.open('POST','/upload');
    xhr.send(data)
}

如果一个文件上传框可以上传多个文件，那么得将这些文件分别添加进FormData，注意他们的名字是一样的。

结果是一样的：

源代码

后台是用python flask写的
代码