JS：带文件输入的 FormData 导致 Ajax 请求崩溃

Posted 2023-03-14

【中文标题】JS：带文件输入的 FormData 导致 Ajax 请求崩溃

【英文标题】：JS: FormData w/ File Input is Crashing Ajax Request

【发布时间】：2018-06-05 19:38:32

【问题描述】：

遇到了一个非常奇怪的问题，直到我将代码推送到实时服务器并尝试在我的 iPhone 上使用它之后才出现。

这是提交给我设置为记录所有传入请求（以及标头和方法）的 node.js 脚本，当出现以下问题时，日志显示没有收到任何内容。

无论如何：

$('#addrecord').on('submit', function(e) 
e.preventDefault();
var url = '/admin/app/addrecord'
    var data = $('#addrecord')[0];
    var formData = new FormData(data);

            $.ajax( // create an AJAX call...
             data: formData,
             processData: false,
             contentType: false,
             cache: false,
             type: "POST", // GET or POST
             url: url, // the file to call
             success: function(response)  // on success..
                if (response.name == 200) 
                    if (response.message == "add") addComplete(response.address);
                    else editComplete(response.address);;
                 
                 else 
                    console.log("Form Rejected");        
                   
              ,
              error: function(response)  
                console.log("Error - " + JSON.stringify(response));
               
          );
    );

这与我的 html 文件中通常的 <form id="addrecord" method="post" enctype="multipart/form-data" role="form"> ... </form> 配对。

所以问题是这个表单我有一个<input type="file" id="photo" name="photo"> 输入字段。如果我尝试在未在此输入中选择图像的情况下提交表单，则表单不会发送任何内容而只是挂起。服务器绝对没有收到任何内容（请记住，我正在记录每个请求）。

现在，如果我使用文件输入从手机中选择图像，或者如果我编辑 html 以删除输入文件字段，Ajax 请求会顺利触发，并且我的 node.js 服务器会完美接收所有内容.

我真的被这个难住了。有任何想法吗？

【参考方案1】：

显然，这是 Safari 中的一个错误。

最终检测是否选择了文件，如果没有，则在提交表单之前从 DOM 中删除元素。