Question

我有一个发布图片的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。

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

谢谢！

Answer 1

不幸的是，Safari并不支持规范的这一部分：https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility，特别是条目方法。

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

但是，是的，你可能是对的 - 在那之前进行验证可能是值得的。

Answer 2

我通过有条件解决了这个问题（如果Safari是浏览器），迭代表单的元素属性。对于所有其他浏览器，我的包装器只是遍历 FormData条目（）。在任何一种情况下，我的函数的最终结果是一个简单的javascript对象（JSON），它相当于名称/值对。该对象可以直接传递给JQuery ajax 函数的数据属性（未指定 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);
               }
       });

Safari说FormData.entries（）不是一个函数

2 个答案: