Safari 说 FormData.entries() 不是一个函数答案

【问题标题】：Safari is saying FormData.entries() is not a functionSafari 说 FormData.entries() 不是一个函数
【发布时间】：2016-12-07 22:47:33
【问题描述】：

我有一个发布图像的 ajax 函数，该函数在 Chrome 和 Firefox 中完美运行。不过，Safari 和 iOS Safari 都对此犹豫不决。

我正在创建和附加这样的值：

var ajaxImage = new FormData();
ajaxImage.append('file-0', $('.some-file-input')[0].files[0]);

然后我稍后调用这个图像，使用ajaxImage.entries() 来初始化FormData 对象的迭代器，以便我可以对其执行验证。但是，在 Safari 中 ajaxImage.entries() 会抛出 entries is not a function TypeError。

我想我可以在到达这一点之前进行验证作为一种解决方法，但现在它困扰着我，所以我想看看是否有人可以对此有所了解。

谢谢！

【问题讨论】：

标签： javascript ios ajax safari

【解决方案1】：

很遗憾，Safari 不支持这部分规范：https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility，特别是 entry 方法。

我自己没有尝试过，但也许像这样的 polyfill：https://github.com/francois2metz/html5-formdata 可能有用？

但是，是的，您可能是对的——在此之前进行验证可能是值得的。

【讨论】：

感谢您的回复，以及有关 FormDate polyfill 的提示，这在未来可能会有用。不过，我认为您是对的，我将在它们进入 FormData 之前进行验证，从而绕过 Safari 问题。这是一个无赖，但很高兴知道！谢谢！

【解决方案2】：

我通过有条件地（如果 Safari 是浏览器）迭代 form 的 elements 属性解决了这个问题。对于所有其他浏览器，我的包装器只遍历 FormData entries()。无论哪种情况，我的函数的最终结果都是一个简单的 javascript 对象 (JSON)，它相当于名称/值对。该对象可以直接传递给 JQuery ajax 函数的 data 属性（未指定 contentType 和 processData )。

function FormDataNameValuePairs(FormName)
{
  var FormDaytaObject={};
  var FormElement=$('#'+FormName).get(0);

  if (IsSafariBrowser())
  {
    var FormElementCollection=FormElement.elements;
    //console.log('namedItem='+FormElementCollection.namedItem('KEY'));
    var JQEle,EleType;
    for (ele=0; (ele < FormElementCollection.length); ele++)
    {
      JQEle=$(FormElementCollection.item(ele));
      EleType=JQEle.attr('type');

      // https://github.com/jimmywarting/FormData/blob/master/FormData.js
      if ((! JQEle.attr('name')) ||
          (((EleType == 'checkbox') || (EleType == 'radio')) &&
           (! JQEle.prop('checked'))))
        continue;
      FormDaytaObject[JQEle.attr('name')]=JQEle.val();
    }
  }
  else
  {
    var FormDayta=new FormData(FormElement);
    for (var fld of FormDayta.entries())
      FormDaytaObject[fld[0]]=fld[1];
  }

  return FormDaytaObject;
}

IsSafariBrowser() 是通过你最喜欢的方法实现的，但我选择了这个：

function IsSafariBrowser()
{
  var VendorName=window.navigator.vendor;
  return ((VendorName.indexOf('Apple') > -1) &&
          (window.navigator.userAgent.indexOf('Safari') > -1));
}

ajax 调用的示例用法：

var FormDaytaObject=FormDataNameValuePairs('FiltersForm');

$.ajax({url: 'AJAXDoSomethingWithFilters/',
        method: 'POST',
        data: FormDaytaObject,
        dataType: 'text',
        success: function(data)
                 {
                   console.log('AJAXDoSomethingWithFilters success:'+data);
                 },
        error: function(JQXhr,Status,Err)
               {
                 console.log('AJAXDoSomethingWithFilters error:'+Err);
               }
       });

【讨论】：