new FormData() - FormData对象的作用及用法

EdwardUp 发布于2019-08-21 17:57 / 1644人阅读

摘要：一概述对象的使用用一些键值对来模拟一系列表单控件即把中所有表单元素的与组装成一个异步上传二进制文件。二使用对象的操作方法，全部在原型中，自己本身没任何的属性及方法。

一、概述

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

二、使用

1.FormData对象的操作方法，全部在原型中，自己本身没任何的属性及方法。

let formData = new FormData()
formData.append("user", "zhang")
获取 formData.get("user")  //zhang
删除 formData.delete("user")
.....

2.使用FormData对象发送文件

HTML部分

        
            姓名: 
        
        
            文件：
        
        
            
        

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", "file.php");
    // 监听上传进度
    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) {
                    //
            }
    }
}

注意1：使用jQuery

 $.ajax({
    url: "file.php",
    type: "POST",
    data: formdata,                    // 上传formdata封装的数据
    dataType: "JSON",
    cache: false,                      // 不缓存
    processData: false,                // jQuery不要去处理发送的数据
    contentType: false,                // jQuery不要去设置Content-Type请求头
    success:function (data) {           //成功回调
        console.log(data);
    }
});

注意2：参数
new FormData的参数是一个DOM对象，而非jQuery对象

var formData = new FormData($("#file")[0]);

三、jQuery的参数序列化方法serialize()

序列表表格内容为字符串，用于 Ajax 请求。
$("form").serialize()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90264.html

FormData 和 Iframe上传文件的两种方式

摘要：还特别介绍一种用使用对象上传文件的方法。设置为上传文件不需要缓存。用上传文件因为不是所有浏览器都支持的，所以有时候需要用来实现文件上传的功能。用AJAX上传文件，一般都是用FormData对象。 FormData对象，是可以使用一系列的健值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个表单。 FormData的使用创建一个空的FormData对象，然后再用...

Dean 2019-08-20 14:48 评论0 收藏0
antd 和 element上传文件详解与FormData详解

摘要：当用户完成选择文件动作时，提交子页面中的。从此我们上传文件就欢欣鼓舞的来找了。因为的核心是对象，异步的实现是通过一个对象，一般简称该对象对。这些回答基于自己理解，如有不妥，希望路过的大神轻喷，指正。背景平时工作中经常会遇到需要上传文件的情况，如果你用ant design 或者element ,它们都提供了上传的组件。我们分别来看一下element 和 antd 手动上传怎么处理：...

Fundebug 2019-08-23 10:29 评论0 收藏0
「每日一瞥

摘要：首先，我们需要一个基本框架来处理表单域变化和表格提交。最起码我们需要提供一个来告诉如果用户还没有对表单域进行改动，就不必展示错误。我们需要一个来标识用户已尝试提交表单，还需要来标识表单是否正在提交以及每个表单域是否正在进行异步校验。 showImg(https://segmentfault.com/img/remote/1460000017516912?w=1200&h=630); ...

XboxYan 2019-08-23 15:16 评论0 收藏0
七牛云上传及上传方法封装

摘要：分片及七牛云上传封装项目里面用到七牛云，有分片和简单上传在此做下简单的记录，分享下面是分片上传封装是我写在里面分片的大小如分片项目是框架，请求是。分片及七牛云上传封装项目里面用到七牛云，有分片和简单上传在此做下简单的记录，分享下面是分片上传封装 process.env.MAX_FILESIZE 是我写在config里面分片的大小如1024102410 10MB分片项目是vue...

Muninn 2019-08-26 13:33 评论0 收藏0