项目中,目前都尽量采用 ajax 上传表单,然后根据返回值进行提示,感觉用户体验好点。
最近出现一个问题:
苹果部分型号的手机,在微信中,完善个人信息页面,ajax上传表单时,未选择头像,出现失败问题。
查看 nginx 返回 408、400 的错误,ajax 进入 error 回调。
碰到这种兼容性问题,真的很纠结,查看了各种资料,最终找到了解决方案。
原因是:safari 浏览器部分老的型号的 bug 问题
参考文章:
https://stackoverflow.com/questions/49614091/safari-11-1-ajax-xhr-form-submission-fails-when-inputtype-file-is-empty
https://trac.webkit.org/changeset/230963/webkit
解决方法:
1.实例化 FormData 后,删除未选择文件的 input 元素(未测试,不过应该没问题)
var formData = new FormData($form[0]);
$("input[type=file]").each(function() {
if($(this).val() === "") {
formData.delete($(this).attr("name"));
}
});
2.先判断是否有文件未选择,设置 'disable = false'(我使用的是该方法)
var $form = $('form')
var $inputs = $('input[type="file"]:not([disabled])', $form)
$inputs.each(function(_, input) {
if (input.files.length > 0) return
$(input).prop('disabled', true)
})
var formData = new FormData($form[0])
$inputs.prop('disabled', false)
input[file]为空,ios手机,ajax上传表单失败,404,408 错误码
猜你喜欢
转载自blog.csdn.net/beyond__devil/article/details/82626536
今日推荐
周排行