input[file]为空,ios手机,ajax上传表单失败,404,408 错误码

81 篇文章 0 订阅
33 篇文章 0 订阅
项目中,目前都尽量采用 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)

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值