Question

我在下面使用formData，并传递结果。但是，如果用户多次执行此操作，则数据会重复。所以我必须在添加任何值之前清除/重置formData。

我可以像f.name =''那样一个接一个地做，我有很多钥匙。有没有更好的方法来解决这个问题？

$('input').change(function(){
// Create a new formdata but at first have to clear/reset it
var fd = new FormData();
var f = $.canvasResize('dataURLtoBlob', data);
f.name = file.name;
fd.append($('#area input').attr('name'), f);
})

Answer 1

@ gurvinder372的答案不会从您的FormData中删除您的密钥，它只会将其设置为空字符串，这不是同一服务器端。
例如，在php中，if ( isset($_POST["yourKey"]) )仍将评估为真。

不幸的是，最好的crossbrowser方法可以在您的情况下创建一个新的FormData对象。

fd = new FormData();

另一种可能性，即它目前仅由 Chrome＆gt; = 50 和 Firefox＆gt; = 39 支持，是使用formData.set()方法。
这将替换set键的值，或者如果没有这样的键，则附加它。

formData.set('yourKey', yourValue);

现在回答问题的标题，在 Chrome＆gt; = 50 和 Firefox＆gt; = 44 中，您可以使用for .. of formData.keys()和{{3} FormData对象的方法：

var formData = new FormData();
formData.append('yourKey', yourValue);

for (var key of formData.keys()) {
    // here you can add filtering conditions
    formData.delete(key)
    });

或甚至使用forEach方法（显然具有相同的浏览器支持）

var formData = new FormData();
formData.append('yourKey', yourValue);

formData.forEach(function(val, key, fD){
    // here you can add filtering conditions
    formData.delete(key)
    });

Answer 2

或者您可以通过

清除FormData

function clearFormData( fd )
{
  for( var prop in fd )
  {
    if ( typeof fd[ prop ] != "function" )
    {
      fd[ prop ] = "";
    }
  }
}

使用enteries和delete方法的另一种方法

var entries = formData.entries();
for(var pair of entries ) 
{
   formData.delete( pair[0] );
}

Answer 3

通过迭代器（= formData.keys（））外部的每个键删除，如下所示。

const keys = [];
for (const key of formData.keys()) {
    keys.push(key);
}
for (const idx in keys) {
    formData.delete(keys[idx]);
}

Answer 4

尝试此FormData.prototype扩展

Object.defineProperties(FormData.prototype, {
load: {
    value: function (d) {
        switch (true) {
            case d instanceof HTMLFormElement: // form
                d.find("[name]").forEach(i => {
                    this.delete(i.name);
                    this.append(i.name, i.value);
                });
                break;
            case d.__proto__ && d.__proto__.hasOwnProperty("value"): // input, textarea ,x-check etc
                this.delete(d.name);
                this.append(d.name, d.value);
                break;
            default: // raw object
                for (var v in d) {
                    this.delete(v);
                    // previn trimitere de tag
                    !(d[v] || {}).tagName && this.append(v, typeof d[v] === 'string' ? d[v] : JSON.stringify(d[v]));
                }
                break;
        }
    },
    enumerable: true
},
clear: {
    value: function () {
        var k = [];
        for (var key of this.keys()) {
            k.push(key);
        }
        k.map(key=>this.delete(key));
    },
    enumerable: true
},
rename: {
    value: function (entrie, to) {
        if (this.getAll(entrie).length > 1) {
            throw Error("FormData can't rename multiple values! ");
        }
        let orig = this.get(entrie);
        gettype(orig) === "File" ? this.append(to, orig, to) : this.append(to, orig);
        this.delete(entrie);
    },
    enumerable: true
},
list: {
    get: function () {
        let o = {};
        for (let [k, v] of this.entries()) {
            var found = this.getAll(k);
            o[k] = found.length > 1 ? found : this.get(k);
        }
        return o;
    },
    enumerable: true
}
});

Answer 5

var fd;
$('input').change(function(){
// Create a new formdata but at first have to clear/reset it
fd = new FormData();
var f = $.canvasResize('dataURLtoBlob', data);
f.name = file.name;
fd.append($('#area input').attr('name'), f);
})

fd.delete($('#area input').attr('name'));

使用javascript清除/重置formData（）

5 个答案: