WebAPI之FormData

FormData API

构造函数：FormData
FormData.prototype.append()
FormData.prototype.get()
FormData.prototype.getAll()
FormData.prototype.set()
FormData.prototype.has()
FormData.prototype.delete()
FormData.prototype.entries()
FormData.prototype.keys()
FormData.prototype.values()

创建formdata对象

从零开始创建

var icon_file = document.getElementById('my_icon');
var fd = new FormData();

// 添加一些数据
fd.append('en_name', 'Pelli');
fd.append('cn_name', '沛笠');
fd.append('age', 18);
fd.append('bug', 'new Error()');

// 添加我的头像文件
// fd.append('my_icon', icon_file.files[0]);

// 获取中文名
var en_name = fd.get('en_name');// "Pelli"

// 获取英文名
var cn_name = fd.get('cn_name');// "沛笠"

// 获取年龄
var age = fd.get('age');// "18"

// 重新设置年龄, 越变越年轻
fd.set('age', 16);
fd.get('age');// "16"

// 新增一个英文名:Jack,我的Rose在哪里？
fd.append('en_name', 'Jack');

// 获取所有的英文名
fd.getAll('en_name');// ["Pelli", "Jack"]

// 把bug删除掉
fd.delete('bug');

// 获取所有的key
var fd_keys = fd.keys();
// 获取所有的value
var fd_vals = fd.values();
// 获取所有的键值
var fd_keys_vals = fd.entries();

// 遍历keys
for(var key of fd_keys){
    console.log(key);
}

// 遍历values
for(var val of fd_vals){
    console.log(val);
}

// 遍历所有的键值
for(var keyval of fd_keys_vals){
    console.log(keyval[0], keyval[1]);
}

使用表单创建formdata数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formdata</title>
</head>
<body>
    <form enctype="multipart/form-data" method="post" name="fileinfo">
        <label>邮箱地址:</label>
        <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
        <label>说明:</label>
        <input type="text" name="filelabel" size="12" maxlength="32" /><br />
        <label>附件:</label>
        <input type="file" name="file" required />
        <input type="submit" value="提交!" />
    </form>

    <script type="text/javascript">
        var formElement = document.querySelector("form");
        var f_data = new FormData(formElement);

        // 新增一些自定义数据
        f_data.append('my_name', 'Pelli');

        var f_ents = f_data.entries();

        // 遍历数据
        for(for ents of f_ents){
            console.log(ents[0], ents[1]);
        }
    </script>
</body>
</html>

使用formdata上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formdata</title>
</head>
<body>
    <form enctype="multipart/form-data" method="post" name="fileinfo">
        <label>邮箱地址:</label>
        <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
        <label>说明:</label>
        <input type="text" name="filelabel" size="12" maxlength="32" /><br />
        <label>附件:</label>
        <input type="file" name="file" required />
        <input type="submit" value="提交!" />
    </form>

    <script type="text/javascript">
        var form = document.forms.namedItem("fileinfo");

        form.addEventListener('submit', function(ev) {
            var oOutput = document.querySelector("div"),
                oData = new FormData(form);

            oData.append("custom", "自定义数据");

            // 发起ajax
            var oReq = new XMLHttpRequest();

            // 在跨域的时候，如果用到了cookie或者session，需要设置该参数
            // 服务器端也需要设置相应的：Access-Control-Allow-Credentials: true
            oReq.withCredentials = true;

            oReq.open("POST", "stash.php", true);

            oReq.onload = function(oEvent) {
                if (oReq.status == 200) {
                    oOutput.innerHTML = "上传成功！";
                } else {
                    oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br />";
                }
            };

            oReq.send(oData);

            // 劫持form的默认事件，使用ajax发送数据
            ev.preventDefault();
        }, false);
    </script>
</body>
</html>

使用jQuery上传formdata数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formdata</title>
</head>
<body>
    <form enctype="multipart/form-data" method="post" name="fileinfo">
        <label>邮箱地址:</label>
        <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
        <label>说明:</label>
        <input type="text" name="filelabel" size="12" maxlength="32" /><br />
        <label>附件:</label>
        <input type="file" name="file" required />
        <input type="submit" value="提交!" />
    </form>

    <script type="text/javascript">
        var fd = new FormData(document.querySelector("form"));
        fd.append("CustomField", "This is some extra data");

        // 也可添加blob数据
        // fd.append("myfile", myBlob, "filename.txt");

        $.ajax({
            url: "stash.php",
            type: "POST",
            data: fd,
            processData: false,  // 不处理数据
            contentType: false,   // 不设置内容类型
            xhrFields: {// 如果有跨域，并且需要使用session时，需要加上该参数
                withCredentials: true
            },
            success: function(data){
                // 成功的回调函数
            },
            error: function(data){
                // 出错的回调函数
            }
        });
    </script>
</body>
</html>

微信公众号:撩码