使用javascript清除/重置formData()

deyfvvtc  于 2023-04-04  发布在  Java
关注(0)|答案(6)|浏览(293)

我在下面使用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);
})
gj3fmq9x

gj3fmq9x1#

@gurvinder372的答案不会从FormData中删除您的密钥,它只会将其设置为空字符串,这不是同一个服务器端。
例如,在php中,if ( isset($_POST["yourKey"]) )仍然会计算为true。
不幸的是,最好的跨浏览器方法是在您的情况下创建一个新的FormData对象。

fd = new FormData();

另一种可能性是使用formData.set()方法,尽管目前只有 Chrome〉=50Firefox〉=39 支持。
这将替换设置键处的值,或者如果没有这样的键,则附加它。

formData.set('yourKey', yourValue);

现在来回答问题的标题,在 Chrome〉=50Firefox〉=44 中,您可以使用FormData Object的for .. of formData.keys()delete方法:

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)
    });
ntjbwcob

ntjbwcob2#

也可以通过执行以下操作清除FormData

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

使用enteriesdelete方法的另一种方法

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

wydwbb8l3#

删除迭代器(= formData.keys())外的每个键,如下所示。

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

niknxzdl4#

试试这个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
}
});
xiozqbni

xiozqbni5#

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'));
f5emj3cl

f5emj3cl6#

这些旧帖子的方式只是停留在没有帮助任何人...要清除表单,只需调用reset方法。

document.getElementById("myForm").reset();

相关问题