FormData对象的应用

OECOM

发布于 2020-07-02 09:25:43

1.6K0

发布于 2020-07-02 09:25:43

文章被收录于专栏：OECOMOECOM

XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。

一、FormData对象作用

用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
异步上传二进制文件

二、FormData的使用

先来看一下FormData都有哪些方法，其实严格意义来说FormData本身并没有属性和方法，其操作方法均在原型当中。

上图即可看出具体的方法锁拥有的方法。

append方法和set都可以向FormData中添加数据，不同的是set方法是直接向FormData中添加，覆盖掉之前的数据，append方法是向其追加数据，即name对应的value将成为一个数组，get方法的作用是根据name获取value，但是如果value值如果是数组的话只会取出第一个数据，全部取出需要调用getAll方法。delete方法是删除name，forEach是循环遍历，has是判断是否包含此name。

var fd = new FormData();
fd.append("websit","http://www.oecom.cn")
fd.set("name","落帆亭")
fd.append("name","haha")
fd.get('websit')//输出http://www.oecom.cn
fd.get('name')//输出：落帆亭
fd.getAll("name")//输出：["haha"."落帆亭"]
fd.has("name")//true

使用FormData对象发送文件

通过FormData可以实现异步上传文件。下面请看代码

HTML部分
<form action="">
        <label for="">
            姓名: <input type="text" name="name">
        </label>
        <label for="">
            文件：<input id="file" type="file" name="file">
        </label>
        <label for="">
            <input type="button" value="保存">
        </label>
</form>
JS部分
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
    // 文件元素
    var file = document.querySelector('[type=file]');
    // 通过FormData将文件转成二进制数据
    var formData = new FormData();
    // 将文件转二进制
    *****注意2******
    formData.append('upload', file.files[0]);
    *****注意1******
    var xhr = new XMLHttpRequest;
    xhr.open('post', '/upload');
    // 监听上传进度
    xhr.upload.onprogress = function (ev) {
    // 事件对象
    // console.log(ev);

        var percent = (ev.loaded / ev.total) * 100 + '%';

        console.log(percent);

        progress.style.width = percent;
    }

    xhr.send(formData);

    xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                    //
            }
    }
}

上述XL码是通过手写xhr来实现发送，当然也可以使用jQuery来实现异步上传文件，但是需要注意的是填入数据是填入的是DOM对象而不是jQuery对象。

//需要注意的点 
var file = $("#file")[0]
formData.append('upload', file.files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    data: formdata,                    // 上传formdata封装的数据
    dataType: 'JSON',
    cache: false,                      // 不缓存
    processData: false,                // jQuery不要去处理发送的数据
    contentType: false,                // jQuery不要去设置Content-Type请求头
    success:function (data) {           //成功回调
        console.log(data);
    }
});