javascript - 在 IE 中遍历 FormData

Question

我正在使用 FormData 将信息发送回服务器。然而，在某些情况下，我需要在发送之前读出数据。

Chrome 允许您遍历集合，但 IE 不提供相同的方法。

下面的代码在 Chrome 中有效:

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

JS Fiddle

有谁知道如何在 IE 中实现相同的结果？谢谢。

Answer 1

有一个 FormData polyfill这样可行。详情请阅读their docs .

IE 10、IE 11 和边缘

要使其与 IE 10 及更高版本一起使用，您只需添加 WeakMap polyfill

JSBin demo for IE10 and above.

<script src="https://unpkg.com/weakmap-polyfill/weakmap-polyfill.min.js"></script>
<script src="https://unpkg.com/formdata-polyfill"></script>

<form action="" id="f">
    <input type="text" name="i1" value="v1">
    <input type="text" name="i2" value="v2">
</form>

<script type="text/javascript">
    console.clear();

    // Create a test FormData object
    var formData = new FormData();
    formData.append('key1', 'value1');
    formData.append('key2', 'value2');

    // Display the key/value pairs
    var formDataEntries = formData.entries(), formDataEntry = formDataEntries.next(), pair;
    while (!formDataEntry.done) {
        pair = formDataEntry.value;
        console.log(pair[0] + ', ' + pair[1]);
        formDataEntry = formDataEntries.next();
    }

    // or, if you are really into compact code
    var es, e, pair;
    for (es = formData.entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }

    // testing getting from form
    var myForm = document.getElementById('f');
    for (es = new FormData(myForm).entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }
</script>

_{上面的代码获取最新版本。测试的版本:https://unpkg.com/weakmap-polyfill@2.0.0/weakmap-polyfill.min.js 和 https://unpkg.com/formdata-polyfill@3.0 .9/formdata.min.js}

仅限 IE11 和 Edge(如果您不必支持 IE10):

如果您只需要 IE 11 及以上版本，您可以删除 WeakMap 的 polyfill，只保留 FormData 的。

JSBin demo here .

<script src="https://unpkg.com/formdata-polyfill"></script>

<form action="" id="f">
    <input type="text" name="i1" value="v1">
    <input type="text" name="i2" value="v2">
</form>

<script type="text/javascript">
    console.clear();

    // Create a test FormData object
    var formData = new FormData();
    formData.append('key1', 'value1');
    formData.append('key2', 'value2');

    // Display the key/value pairs
    var formDataEntries = formData.entries(), formDataEntry = formDataEntries.next(), pair;
    while (!formDataEntry.done) {
        pair = formDataEntry.value;
        console.log(pair[0] + ', ' + pair[1]);
        formDataEntry = formDataEntries.next();
    }

    // or, if you are really into compact code
    var es, e, pair;
    for (es = formData.entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }

    // testing getting from form element
    const myForm = document.getElementById('f');
    for (es = new FormData(myForm).entries(); !(e = es.next()).done && (pair = e.value);) {
        console.log(pair[0] + ', ' + pair[1]);
    }
</script>

_{上面的代码获取最新版本。测试版本:https://unpkg.com/formdata-polyfill@3.0.9/formdata.min.js}