[原]FormData以及原生Ajax上传图片

李余通 18/06/20 20:29:20

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写的
代码

作者:baidu_35085676 发表于 2018/06/20 20:29:20 原文链接 https://blog.csdn.net/baidu_35085676/article/details/80752254
阅读:831